layout.scss

$breakpoints: (
  "xl": $size-xl,
  "lg": $size-lg,
  "md": $size-md,
  "sm": $size-sm,
  "xs": $size-xs
);
@each $key, $breakpoint in $breakpoints {
  @media (max-width: #{$breakpoint}) {
    .col-#{$key}-12,
    .col-#{$key}-11,
    .col-#{$key}-10,
    .col-#{$key}-9,
    .col-#{$key}-8,
    .col-#{$key}-7,
    .col-#{$key}-6,
    .col-#{$key}-5,
    .col-#{$key}-4,
    .col-#{$key}-3,
    .col-#{$key}-2,
    .col-#{$key}-1,
    .col-#{$key}-auto {
      flex: none;
      &.flex-grow,
      &.flex-grow-#{$key} {
        flex-grow: 1;
      }
    }
    .col-#{$key}-12 {
      width: 100%;
    }
    .col-#{$key}-11 {
      width: 91.66666667%;
    }
    .col-#{$key}-10 {
      width: 83.33333333%;
    }
    .col-#{$key}-9 {
      width: 75%;
    }
    .col-#{$key}-8 {
      width: 66.66666667%;
    }
    .col-#{$key}-7 {
      width: 58.33333333%;
    }
    .col-#{$key}-6 {
      width: 50%;
    }
    .col-#{$key}-5 {
      width: 41.66666667%;
    }
    .col-#{$key}-4 {
      width: 33.33333333%;
    }
    .col-#{$key}-3 {
      width: 25%;
    }
    .col-#{$key}-2 {
      width: 16.66666667%;
    }
    .col-#{$key}-1 {
      width: 8.33333333%;
    }
    .col-#{$key}-auto {
      width: auto;
    }
    .hide-#{$key} {
      display: none !important;
    }
    .show-#{$key} {
      display: initial !important;
    }
    .order-#{$key}-1 {
      order: 1;
    }
    .order-#{$key}-2 {
      order: 2;
    }
    .order-#{$key}-3 {
      order: 3;
    }
    .order-#{$key}-4 {
      order: 4;
    }
    .order-#{$key}-5 {
      order: 5;
    }
    .order-#{$key}-6 {
      order: 6;
    }
    .full-#{$key} {
      width: 100% !important;
    }
    .align-right-#{$key} {
      text-align: right;
    }
    .align-left-#{$key} {
      text-align: left;
    }
  }
  .container.grid-#{$key} {
    max-width: $grid-spacing * 2 + $breakpoint;
  }
  .show-#{$key} {
    display: none !important;
  }
}