Visibility SASS

show-for-XXX

You are on a small screen or larger.

You are on a medium screen or larger.

You are on a large screen or larger.

You are on a xlarge screen or larger.

show-for-XXX-only

You are definitely on a small screen.

You are definitely on a medium screen.

You are definitely on a large screen.

hide-for-XXX

You are not on a medium screen or larger.

You are not on a large screen or larger.

You are not on a xlarge screen or larger.

hide-for-XXX-only

You are definitely not on a small screen.

You are definitely not on a medium screen.

You are definitely not on a large screen.

hide or invisible

Can’t touch this.

.hide {
  display: none !important;
}
.invisible {
  visibility: hidden;
}
@media screen and (max-width: ($breakpoint-medium - 1px)) {
  .show-for-medium-up, .show-for-medium {
    display: none !important; } 
}
@media screen and (max-width: ($breakpoint-large - 1px)) {
  .show-for-large-up, .show-for-large {
    display: none !important; } 
}
@media screen and (max-width: ($breakpoint-xlarge - 1px)) {
  .show-for-xlarge-up, .show-for-xlarge {
    display: none !important; } 
}
@media screen and (max-width: 0), screen and (min-width: $breakpoint-medium) {
  .show-for-small-only {
    display: none !important; } 
}
@media screen and (max-width: ($breakpoint-medium - 1px)), screen and (min-width: $breakpoint-large) {
  .show-for-medium-only {
    display: none !important; } 
}
@media screen and (max-width: ($breakpoint-large - 1px)), screen and (min-width: $breakpoint-xlarge) {
  .show-for-large-only {
    display: none !important; } 
}
@media print, screen and (min-width: $breakpoint-medium) {
  .hide-for-medium-up, .hide-for-medium {
    display: none !important; } 
}
@media print, screen and (min-width: $breakpoint-large) {
  .hide-for-large-up, .hide-for-large {
    display: none !important; } 
}
@media print, screen and (min-width: $breakpoint-xlarge) {
  .hide-for-xlarge-up, .hide-for-xlarge {
    display: none !important; } 
}
@media screen and (max-width: ($breakpoint-medium - 1px)) {
  .hide-for-small-only {
    display: none !important; }
}
@media screen and (min-width: $breakpoint-medium) and (max-width: ($breakpoint-large - 1px)) {
  .hide-for-medium-only {
    display: none !important; } 
}
@media screen and (min-width: $breakpoint-large) and (max-width: ($breakpoint-xlarge - 1px)) {
  .hide-for-large-only {
    display: none !important; } 
}