responsive.css

[class*="col-"]:not([class*="col-0"]) {
  display: block;
}

[class*="grid"][class*="col-"]:not([class*="col-0"]) {
  display: flex;
}

[class*="col-0"] {
  display: none;
}

[class*="text-align-"][class*="-l"] {
  text-align: left;
}

[class*="text-align-"][class*="-r"] {
  text-align: right;
}

[class*="text-align-"][class*="-c"] {
  text-align: center;
}

[class*="text-align-"][class*="-j"] {
  text-align: justify;
}

[class*="float-"][class*="-l"] {
  float: left;
}

[class*="float-"][class*="-r"] {
  float: right;
}

[class*="float-"][class*="-n"] {
  float: none;
}

@media screen and (max-width: 80em) {
  [class*="col-"]:not([class*="_lg-0"]) {
    display: block;
  }

  [class*="grid"][class*="col-"]:not([class*="_lg-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_lg-0"] {
    display: none;
  }

  [class*="text-align-"][class*="-l"] {
    text-align: left;
  }

  [class*="text-align-"][class*="-r"] {
    text-align: right;
  }

  [class*="text-align-"][class*="-c"] {
    text-align: center;
  }

  [class*="text-align-"][class*="-j"] {
    text-align: justify;
  }

  [class*="float-"][class*="-l"] {
    float: left;
  }

  [class*="float-"][class*="-r"] {
    float: right;
  }

  [class*="float-"][class*="-n"] {
    float: none;
  }
}
@media screen and (max-width: 64em) {
  [class*="col-"]:not([class*="_md-0"]) {
    display: block;
  }

  [class*="grid"][class*="col-"]:not([class*="_md-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_md-0"] {
    display: none;
  }

  [class*="text-align-"][class*="-l"] {
    text-align: left;
  }

  [class*="text-align-"][class*="-r"] {
    text-align: right;
  }

  [class*="text-align-"][class*="-c"] {
    text-align: center;
  }

  [class*="text-align-"][class*="-j"] {
    text-align: justify;
  }

  [class*="float-"][class*="-l"] {
    float: left;
  }

  [class*="float-"][class*="-r"] {
    float: right;
  }

  [class*="float-"][class*="-n"] {
    float: none;
  }
}
@media screen and (max-width: 48em) {
  [class*="col-"]:not([class*="_sm-0"]) {
    display: block;
  }

  [class*="grid"][class*="col-"]:not([class*="_sm-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_sm-0"] {
    display: none;
  }

  [class*="text-align-"][class*="-l"] {
    text-align: left;
  }

  [class*="text-align-"][class*="-r"] {
    text-align: right;
  }

  [class*="text-align-"][class*="-c"] {
    text-align: center;
  }

  [class*="text-align-"][class*="-j"] {
    text-align: justify;
  }

  [class*="float-"][class*="-l"] {
    float: left;
  }

  [class*="float-"][class*="-r"] {
    float: right;
  }

  [class*="float-"][class*="-n"] {
    float: none;
  }
}
@media screen and (max-width: 35.5em) {
  [class*="col-"]:not([class*="_xs-0"]) {
    display: block;
  }

  [class*="grid"][class*="col-"]:not([class*="_xs-0"]) {
    display: flex;
  }

  [class*="col-"][class*="_xs-0"] {
    display: none;
  }

  [class*="text-align-"][class*="-l"] {
    text-align: left;
  }

  [class*="text-align-"][class*="-r"] {
    text-align: right;
  }

  [class*="text-align-"][class*="-c"] {
    text-align: center;
  }

  [class*="text-align-"][class*="-j"] {
    text-align: justify;
  }

  [class*="float-"][class*="-l"] {
    float: left;
  }

  [class*="float-"][class*="-r"] {
    float: right;
  }

  [class*="float-"][class*="-n"] {
    float: none;
  }
}

responsive.scss

$gl-gridName:   grid !default;
$gl-colName:   col !default;
$breakpoints : (
  default: 0,
  lg: 80em,
  md: 64em,
  sm: 48em,
  xs: 35.5em
) !default;

@mixin responsiveHide($breakpoints) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @if($breakpoint-value == 0) {
      [class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
        display: block;
      }
      [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
        display: flex;
      }
      [class*="#{$gl-colName}-0"] {
        display: none;
      }
      @content
    }
    @else {
      @media screen and (max-width: $breakpoint-value) {
        [class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
          display: block;
        }
        [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"])  {
          display: flex;
        }
        [class*="#{$gl-colName}-"][class*="_#{$breakpoint-name}-0"]{
          display: none;
        }
        @content
      }
    }
  }
}
@include responsiveHide($breakpoints) {
  [class*="text-align-"][class*="-l"] { text-align: left; }
  [class*="text-align-"][class*="-r"] { text-align: right; }
  [class*="text-align-"][class*="-c"] { text-align: center; }
  [class*="text-align-"][class*="-j"] { text-align: justify; }
  [class*="float-"][class*="-l"] { float: left; }
  [class*="float-"][class*="-r"] { float: right; }
  [class*="float-"][class*="-n"] { float: none; }
}