stub out flexbox grid variation via -flex

4 files changed, 45 insertions, 3 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index ed9f232af..5a165a75a 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -44,3 +44,28 @@
 
 @include make-grid-columns();
 
+// Flex column reordering
+@if $enable-flex {
+  .col-xs-first { order: -1; }
+  .col-xs-last { order: 1; }
+
+  @include media-breakpoint-up(sm) {
+    .col-sm-first { order: -1; }
+    .col-sm-last { order: 1; }
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-md-first { order: -1; }
+    .col-md-last { order: 1; }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .col-lg-first { order: -1; }
+    .col-lg-last { order: 1; }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-first { order: -1; }
+    .col-xl-last { order: 1; }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b4479386e..35a898216 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -37,6 +37,7 @@ $link-hover-decoration:      underline !default;
 //
 // Quickly modify global styling by enabling or disabling features.
 
+$enable-flex:                true !default;
 $enable-rounded:             true !default;
 $enable-shadows:             false !default;
 $enable-gradients:           false !default;
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 32705025e..ad2060cbf 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -22,7 +22,11 @@
     @include media-breakpoint-up($breakpoint) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
-        float: left;
+        @if $enable-flex {
+          // Do nothing
+        } @else {
+          float: left;
+        }
       }
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 29af269aa..17998affb 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -11,6 +11,10 @@
 }
 
 @mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  }
   margin-left:  ($gutter / -2);
   margin-right: ($gutter / -2);
   @include clearfix();
@@ -18,14 +22,22 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  float: left;
+  @if $enable-flex {
+    // Do nothing
+  } @else {
+    float: left;
+  }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
 @mixin make-col-span($size, $columns: $grid-columns) {
-  width: percentage($size / $columns);
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+  } @else {
+    width: percentage($size / $columns);
+  }
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {