Responsive utilities

responsive-utilities.css

@media (max-width: 1199px) {
  [data-display-min="wide"] {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  [data-display-max="desktop"] {
    display: none !important;
  }
}
@media (max-width: 991px) {
  [data-display-min="desktop"] {
    display: none !important;
  }
}
@media (min-width: 992px) {
  [data-display-max="tablet"] {
    display: none !important;
  }
}
@media (max-width: 767px) {
  [data-display-min="tablet"] {
    display: none !important;
  }
}
@media (min-width: 768px) {
  [data-display-max="mobile"] {
    display: none !important;
  }
}
@media (max-width: 360px) {
  [data-display-min="mobile"] {
    display: none !important;
  }
}
@media (min-width: 361px) {
  [data-display-max="mini"] {
    display: none !important;
  }
}

responsive-utilities.scss

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

$screen-breakpoints: (
  "wide": 1200px,
  "desktop": 992px,
  "tablet": 768px,
  "mobile": 361px,
  "mini": 0px
);
$screen-names: map-keys($screen-breakpoints);

@for $i from 1 through length($screen-names) {
  $screen-name: nth($screen-names, $i);
  $screen-breakpoint: map-get($screen-breakpoints, $screen-name);

  @if ($i > 1) {
    // Find the screen breakpoint of the wider level
    $prev-screen-name: nth($screen-names, $i - 1);
    $prev-screen-breakpoint: map-get($screen-breakpoints, $prev-screen-name);

    @media (min-width: $prev-screen-breakpoint) {
      [data-display-max="#{$screen-name}"] {
        display: none !important;
      }
    }
  }

  @if ($i < length($screen-names)) {
    @media (max-width: $screen-breakpoint - 1px) {
      [data-display-min="#{$screen-name}"] {
        display: none !important;
      }
    }
  }
}