From 5a9538d4c789ab25be71db1e6f190b8ad80e6858 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 6 Feb 2016 00:45:29 -0800
Subject: [PATCH] Revamp grid classes to require .col base class and improve
 flexbox grid classes with auto layout via flex: 1

---
 scss/_grid.scss                  | 12 ++++++++++++
 scss/mixins/_grid-framework.scss | 18 ++----------------
 scss/mixins/_grid.scss           |  4 +++-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/scss/_grid.scss b/scss/_grid.scss
index d846f098c4..de5b8fc4d7 100644
--- a/scss/_grid.scss
+++ b/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();
 }
 
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 16c970a81c..442bd4a0a2 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/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)
           }
         }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 230dacc547..96e334af4f 100644
--- a/scss/mixins/_grid.scss
+++ b/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;