Merge branch 'v4-dev' into v4-navbars

3 files changed, 33 insertions, 22 deletions

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index cc2585d5d..8e7c5225e 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -180,20 +180,21 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 }
 
 // Make the element grid-ready (applying everything but the width)
-@mixin make-col($gutter: $grid-gutter-width) {
+@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   position: relative;
+  min-height: 1px; // Prevent collapsing
+  padding-right: ($gutter / 2);
+  padding-left:  ($gutter / 2);
+
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
   @if $enable-flex {
-    flex: 1;
-  } @else {
-    float: left;
+    width: 100%;
   }
-  min-height: 1px;
-  padding-left:  ($gutter / 2);
-  padding-right: ($gutter / 2);
 }
 
-@mixin make-col-span($size, $columns: $grid-columns) {
-  // Set a width (to be used in or out of media queries)
+@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
@@ -201,6 +202,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
     // do not appear to require this.
     max-width: percentage($size / $columns);
   } @else {
+    float: left;
     width: percentage($size / $columns);
   }
 }
@@ -232,23 +234,23 @@ See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example
   @include make-row();
 }
 .content-main {
-  @include make-col();
+  @include make-col-ready();
 
   @media (max-width: 32em) {
-    @include make-col-span(6);
+    @include make-col(6);
   }
   @media (min-width: 32.1em) {
-    @include make-col-span(8);
+    @include make-col(8);
   }
 }
 .content-secondary {
-  @include make-col();
+  @include make-col-ready();
 
   @media (max-width: 32em) {
-    @include make-col-span(6);
+    @include make-col(6);
   }
   @media (min-width: 32.1em) {
-    @include make-col-span(4);
+    @include make-col(4);
   }
 }
 {% endhighlight %}
@@ -442,7 +444,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
 
 ### Example: Column ordering
 
-Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes.
+Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
 
 <div class="bd-example-row">
 {% example html %}
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 44a12aee6..81cdecf60 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -144,7 +144,7 @@ These media queries are also available via Sass mixins:
 And finally media that spans multiple breakpoint widths:
 
 {% highlight scss %}
-// Example 
+// Example
 // Medium devices (tablets, 768px and up) and  Large devices (desktops, 992px and up)
 @media (min-width: 768px) and (max-width: 1199px) { ... }
 {% endhighlight %}
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 839aeeb24..2a44fd589 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport.
     <span class="hidden-lg-down not-visible">Large or narrower</span>
   </div>
 </div>
+
+<hr>
+
 <div class="row responsive-utilities-test visible-on">
   <div class="col-xs-6 col-sm-3">
     <span class="hidden-xs-down visible">&#10004; Visible on small or wider</span>
@@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport.
     <span class="hidden-xl-up not-visible">Extra large</span>
   </div>
 </div>
+
+<hr>
+
 <div class="row responsive-utilities-test visible-on">
-  <div class="col-xs-6 col-sm-3">
+  <div class="col-xs-6 col-sm-4">
     <span class="hidden-sm-up visible">&#10004; Your viewport is exactly extra small</span>
     <span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
   </div>
-  <div class="col-xs-6 col-sm-3">
+  <div class="col-xs-6 col-sm-4">
     <span class="hidden-xs-down hidden-md-up visible">&#10004; Your viewport is exactly small</span>
     <span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
   </div>
-  <div class="col-xs-6 col-sm-3">
+  <div class="col-xs-6 col-sm-4">
     <span class="hidden-sm-down hidden-lg-up visible">&#10004; Your viewport is exactly medium</span>
     <span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
   </div>
-  <div class="col-xs-6 col-sm-3">
+  </div>
+
+<div class="row responsive-utilities-test visible-on">
+  <div class="col-xs-6 col-sm-4">
     <span class="hidden-md-down hidden-xl-up visible">&#10004; Your viewport is exactly large</span>
     <span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
   </div>
-  <div class="col-xs-6 col-sm-3">
+  <div class="col-xs-6 col-sm-4">
     <span class="hidden-lg-down visible">&#10004; Your viewport is exactly extra large</span>
     <span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
   </div>