flip things around again, no more base class, try out some new stuff to keep responsive flex grid working

3 files changed, 33 insertions, 16 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 78a0d91a9..6da25b122 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -36,16 +36,16 @@
 // Common styles for small and large grid columns
 
 @if $enable-grid-classes {
-  .col {
+  [class^="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;
-    }
+    // 
+    // // 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 442bd4a0a..51eda0561 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -9,14 +9,22 @@
     $breakpoint-counter: ($breakpoint-counter + 1);
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
-      %grid-column-float-#{$breakpoint} {
-        float: left;
+      // %grid-column-float-#{$breakpoint} {
+      //   float: left;
+      // }
+      @if $enable-flex {
+        .col-#{$breakpoint} {
+          @include make-col($gutter);
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+        }
       }
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @if not $enable-flex {
-            @extend %grid-column-float-#{$breakpoint};
-          }
+          // @if not $enable-flex {
+          //   @extend %grid-column-float-#{$breakpoint};
+          // }
           @include make-col-span($i, $columns);
         }
       }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 96e334af4..f358ac388 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -35,17 +35,25 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  @if $enable-flex {
-    flex: 1;
-  } @else {
-    float: left;
-  }
+  // @if $enable-flex {
+  //   flex: 1;
+  // } @else {
+  //   float: left;
+  // }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
 @mixin make-col-span($size, $columns: $grid-columns) {
+  position: relative;
+  @if $enable-flex {
+    flex: 0 0 auto;
+  }
+  min-height: 1px;
+  padding-left:  ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width / 2);
+
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
@@ -53,6 +61,7 @@
     // do not appear to require this.
     max-width: percentage($size / $columns);
   } @else {
+    float: left;
     width: percentage($size / $columns);
   }
 }