Merge branch 'v4-dev' into v4-utils

5 files changed, 77 insertions, 21 deletions

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index ec5a7365e..80db93c93 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -1,12 +1,13 @@
 ---
 layout: docs
 title: Flexbox grid system
+description: Documentation and examples for using Bootstrap's optional flexbox grid system.
 group: layout
 ---
 
-Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
+Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/getting-started/flexbox/) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
 
-Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
+Bootstrap's flexbox grid includes support for every feature from our [default grid system]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/layout/grid/) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
 
 {% callout warning %}
 **Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development.
@@ -21,7 +22,7 @@ Bootstrap's flexbox grid includes support for every feature from our [default gr
 
 The flexbox grid system behaves similar to our default grid system, but with a few notable differences:
 
-- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise.
+- [Grid mixins]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/getting-started/flexbox/) to utilize them as you would otherwise.
 - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
 - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide.
 - Flexbox grid columns have significantly more alignment options available, including vertical alignment.
@@ -221,3 +222,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
 </div>
 {% endexample %}
 </div>
+
+## Reordering
+
+Flexbox utilities for controlling the **visual order** of your content.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col-xs flex-xs-unordered">
+      First, but unordered
+    </div>
+    <div class="col-xs flex-xs-last">
+      Second, but last
+    </div>
+    <div class="col-xs flex-xs-first">
+      Third, but first
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 7114da4b7..26ff36c41 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Grid system
+description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system.
 group: layout
 ---
 
@@ -139,7 +140,15 @@ Variables and maps determine the number of columns, the gutter width, and the me
 
 {% highlight scss %}
 $grid-columns:      12;
-$grid-gutter-width: 30px;
+$grid-gutter-width-base: 30px;
+
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base, // 30px
+  sm: $grid-gutter-width-base, // 30px
+  md: $grid-gutter-width-base, // 30px
+  lg: $grid-gutter-width-base, // 30px
+  xl: $grid-gutter-width-base  // 30px
+)
 
 $grid-breakpoints: (
   // Extra small screen / phone
@@ -168,23 +177,27 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 {% highlight scss %}
 // Creates a wrapper for a series of columns
-@mixin make-row($gutter: $grid-gutter-width) {
+@mixin make-row($gutters: $grid-gutter-widths) {
   @if $enable-flex {
     display: flex;
     flex-wrap: wrap;
   } @else {
     @include clearfix();
   }
-  margin-left:  ($gutter / -2);
-  margin-right: ($gutter / -2);
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      margin-right: ($gutter / -2);
+      margin-left:  ($gutter / -2);
+    }
+  }
 }
 
 // Make the element grid-ready (applying everything but the width)
-@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col-ready($gutters: $grid-gutter-widths) {
   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
@@ -192,9 +205,17 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
   @if $enable-flex {
     width: 100%;
   }
+
+  @each $breakpoint in map-keys($gutters) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($gutters, $breakpoint);
+      padding-right: ($gutter / 2);
+      padding-left:  ($gutter / 2);
+    }
+  }
 }
 
-@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col($size, $columns: $grid-columns) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
@@ -208,14 +229,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 }
 
 // Get fancy by offsetting, or changing the sort order
-@mixin make-col-offset($columns) {
-  margin-left: percentage(($columns / $grid-columns));
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  margin-left: percentage($size / $columns);
 }
-@mixin make-col-push($columns) {
-  left: percentage(($columns / $grid-columns));
+
+@mixin make-col-push($size, $columns: $grid-columns) {
+  left: if($size > 0, percentage($size / $columns), auto);
 }
-@mixin make-col-pull($columns) {
-  right: percentage(($columns / $grid-columns));
+
+@mixin make-col-pull($size, $columns: $grid-columns) {
+  right: if($size > 0, percentage($size / $columns), auto);
 }
 {% endhighlight %}
 
@@ -223,7 +246,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
 
-See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>.
+See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.
 
 {% highlight scss %}
 .container {
@@ -461,11 +484,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
 
 ### Columns and gutters
 
-The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters.
+The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
 
 {% highlight scss %}
-$grid-columns: 12;
-$grid-gutter-width: 30px;
+$grid-columns:               12 !default;
+$grid-gutter-width-base:     30px !default;
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+) !default;
 {% endhighlight %}
 
 ### Grid tiers
diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
index 6843af7ec..b998490d3 100644
--- a/docs/layout/media-object.md
+++ b/docs/layout/media-object.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Media object
+description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
 group: layout
 ---
 
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 81cdecf60..3e6c7e7e0 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Overview
+description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
 group: layout
 redirect_from: "/layout/"
 ---
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 2a44fd589..4334eb4d6 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -1,6 +1,7 @@
 ---
 layout: docs
 title: Responsive utilities
+description: Use responsive display utility classes for showing and hiding content by device, via media query.
 group: layout
 ---