Add simple same-height columns to the grid with flexbox

_includes/nav-css.html

@@ -24,6 +24,7 @@
     <li><a href="#grid-nesting">Nesting columns</a></li>
     <li><a href="#grid-column-ordering">Column ordering</a></li>
     <li><a href="#grid-less">LESS mixins and variables</a></li>
+    <li><a href="#grid-same-height-columns">Same height columns</a></li>
   </ul>
 </li>
 <li>

css.html

@@ -615,6 +615,29 @@ <h4>Example usage</h4>
 </div>
 {% endhighlight %}
 
+    <h3 id="grid-same-height-columns">Same height columns</h3>
+    <p>Give your grid columns the same heights using responsive classes on the row, such as <code>.row-md-flex</code>.</p>
+
+    <p>Note that this is not supported in Internet Explorer prior to version 10.  In any unsupported browser, the <code>row-*-flex</code> classes will have no effect.</p>
+
+    <p>Add the <code>.row-md-flex</code> class to a row.  All of the columns will stretch vertically to occupy the same height as the tallest column.</p>
+
+    <div class="row show-grid row-md-flex">
+      <div class="col-md-4">.row-md-flex > .col-md-4</div>
+      <div class="col-md-4">.row-md-flex > .col-md-4<br/>taller<br/>column</div>
+      <div class="col-md-4">.row-md-flex > .col-md-4</div>
+    </div>
+
+{% highlight html %}
+<div class="row row-md-flex">
+  <div class="col-md-4">.row-md-flex > .col-md-4</div>
+  <div class="col-md-4">.row-md-flex > .col-md-4<br/>taller<br/>column</div>
+  <div class="col-md-4">.row-md-flex > .col-md-4</div>
+</div>
+{% endhighlight %}
+
+    <p>If you specify more than 12 columns in one row, the <code>.row-*-flex</code> classes will force them to shrink into a single row, and the columns will not wrap.</p>
+
   </div>
 
 

dist/css/bootstrap.css

@@ -693,6 +693,36 @@ pre code {
   margin-right: -15px;
   margin-left: -15px;
 }
+.row-xs-flex {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+}
+@media (min-width: 768px) {
+  .row-sm-flex {
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+  }
+}
+@media (min-width: 992px) {
+  .row-md-flex {
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+  }
+}
+@media (min-width: 1200px) {
+  .row-lg-flex {
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+  }
+}
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;

examples/grid/grid.css

@@ -25,4 +25,4 @@ h4 {
 hr {
   margin-top: 40px;
   margin-bottom: 40px;
-}
+}

examples/grid/index.html

@@ -137,6 +137,15 @@ <h3>Offset, push, and pull resets</h3>
         <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
       </div>
 
+      <hr>
+
+      <h3>Same-height columns</h3>
+      <p>Make columns in a row the same height using flexbox.</p>
+      <div class="row row-xs-flex">
+        <div class="col-xs-6 col-xs-flex">.col-xs-6</div>
+        <div class="col-xs-6 col-xs-flex">.col-xs-6<br/><br/>(nb. the row has the <code>.row-xs-flex</code> class as well as <code>.row</code>)</div>
+      </div>
+
 
     </div> <!-- /container -->
 

less/grid.less

@@ -40,6 +40,29 @@
   .make-row();
 }
 
+// Flexbox rows
+//
+// Used for same-height grid columns
+.row-xs-flex {
+  .display-flex();
+}
+@media (min-width: @screen-sm) {
+  .row-sm-flex {
+    .display-flex();
+  }
+}
+@media (min-width: @screen-md) {
+  .row-md-flex {
+    .display-flex();
+  }
+}
+@media (min-width: @screen-lg) {
+  .row-lg-flex {
+    .display-flex();
+  }
+}
+
+
 
 // Columns
 //

less/mixins.less

@@ -262,7 +262,13 @@
   filter: ~"alpha(opacity=@{opacity-ie})";
 }
 
-
+// Flexbox
+.display-flex() {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+}
 
 // GRADIENTS
 // --------------------------------------------------