Bootstrap 4 | Responsive Grid Classes

_spacing.scss

@each $breakpoint in map-keys($grid-breakpoints) {
  @each $prop, $abbrev in (margin: m, padding: p) {
    @each $size, $lengths in $spacers {
      @include media-breakpoint-down($breakpoint) {
        $length-x:   map-get($lengths, x);
        $length-y:   map-get($lengths, y);

        .#{$abbrev}-#{$breakpoint}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
        .#{$abbrev}-#{$breakpoint}-t-#{$size} { #{$prop}-top:    $length-y !important; }
        .#{$abbrev}-#{$breakpoint}-r-#{$size} { #{$prop}-right:  $length-x !important; }
        .#{$abbrev}-#{$breakpoint}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
        .#{$abbrev}-#{$breakpoint}-l-#{$size} { #{$prop}-left:   $length-x !important; }

        // Axes
        .#{$abbrev}-#{$breakpoint}-x-#{$size} {
          #{$prop}-right:  $length-x !important;
          #{$prop}-left:   $length-x !important;
        }
        .#{$abbrev}-#{$breakpoint}-y-#{$size} {
          #{$prop}-top:    $length-y !important;
          #{$prop}-bottom: $length-y !important;
        }
      }
    }
  }
}

// Eg. `.m-md-y-1`