Revamp grid classes to require .col base class and improve flexbox grid classes with auto layout via flex: 1

scss/_grid.scss

@@ -36,6 +36,18 @@
 // Common styles for small and large grid columns
 
 @if $enable-grid-classes {
+  .col {
+    position: relative;
+    min-height: 1px;
+    padding-right: ($grid-gutter-width / 2);
+    padding-left: ($grid-gutter-width / 2);
+
+    // Allow `.col` to use an automatic, even width when flex mode is enabled
+    @if $enable-flex {
+      flex: 1;
+    }
+  }
+
   @include make-grid-columns();
 }
 

scss/mixins/_grid-framework.scss

@@ -4,23 +4,9 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  // Common properties for all breakpoints
-  %grid-column {
-    position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-    // Inner gutter via padding
-    padding-left: ($gutter / 2);
-    padding-right: ($gutter / 2);
-  }
   $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
     $breakpoint-counter: ($breakpoint-counter + 1);
-    @for $i from 1 through $columns {
-      .col-#{$breakpoint}-#{$i} {
-        @extend %grid-column;
-      }
-    }
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
@@ -36,7 +22,7 @@
       }
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .col-#{$breakpoint}-#{$modifier}-#{$i} {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
@@ -44,7 +30,7 @@
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
         @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0
-          .col-#{$breakpoint}-offset-#{$i} {
+          .offset-#{$breakpoint}-#{$i} {
             @include make-col-modifier(offset, $i, $columns)
           }
         }

scss/mixins/_grid.scss

@@ -35,7 +35,9 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  @if not $enable-flex {
+  @if $enable-flex {
+    flex: 1;
+  } @else {
     float: left;
   }
   min-height: 1px;