Responsive grid focused on mobile first

responsive-grid.scss

// BREAKPOINTS
// https://jdsteinbach.com/css/sass-maps-breakpoint-mixin/
$breakpoints: (
  small : 320px,
  medium: 768px,
  large : 992px,
  wide  : 1400px
);
$columns: 12;
$gutter : 1em;

@mixin media( $size ) {
  @if not map-has-key( $breakpoints, $size ) {
    @warn "Warning: `#{$size}` is not a valid breakpoint name.";
  } @else {
    @media ( min-width: map-get( $breakpoints, $size ) ) {
      @content;
    }
  }
}

@mixin column( $size, $cols ) {
  .#{$size}-#{$cols} {
    width: ( $cols * 100 / $columns ) +  %;
  }
}

.clearfix {
  &:before,
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.row {
  @extend .clearfix;
  
  &.reverse .column {
    float: right;
  }
}

.column {
  padding: 0 $gutter;
  float: left;
  width: 100%;
}

@each $size, $value in ( $breakpoints ) {
  @include media( $size ) {
    @for $i from 1 through $columns {
      @include column( $size, $i );
    }
  }
}