3 files changed, 41 insertions, 19 deletions
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index b30fe5b1e..4e6ec9193 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -4,21 +4,27 @@ title: Grid system
 group: layout
 ---
 
-Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout.
+Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout. There are multiple tiers, one for each [media query range]({{ site.baseurl }}/layout/media-queries/), made available via our predefined classes or semantic mixins.
 
-There are multiple tiers for different device sizes, available via our predefined classes or semantic mixins.
+Here's how the grid system works:
+
+- There are three major components—containers, rows, and columns.
+- Containers—`.container` for fixed width or `.container-fluid` for full width—center your site's contents.
+- Rows are horizontal groups of columns that clear floats (when not in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/)).
+- Content should be placed within columns, and only columns may be immediate children of rows.
+- You can use predefined grid classes or Sass mixins for more semantic markup.
 
 ## Contents
 
 * Will be replaced with the ToC, excluding the "Contents" header
 {:toc}
 
-### Quick start
+## Quick start
 
 - Example grid class
 - Example mixins
 
-### Introduction
+## Introduction
 
 Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
 
@@ -34,7 +40,7 @@ Grid systems are used for creating page layouts through a series of rows and col
 
 Look to the examples for applying these principles to your code.
 
-### Grid options
+## Grid options
 
 See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
 
@@ -111,20 +117,33 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
   </table>
 </div>
 
-### Semantic mixins
+## Sass mixins
 
-In addition to [prebuilt grid classes](#grid-example-basic) for fast layouts, Bootstrap includes Sass variables and mixins for quickly generating your own simple, semantic layouts.
+When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our [prebuilt grid classes](#grid-example-basic) use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
 
-#### Variables
+### Variables
 
 Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 
 {% highlight scss %}
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 34em,
+  // Medium screen / tablet
+  md: 48em,
+  // Large screen / desktop
+  lg: 62em,
+  // Extra large screen / wide desktop
+  xl: 75em
+) !default;
+
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
 {% endhighlight %}
 
-#### Mixins
+### Mixins
 
 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
 
@@ -162,7 +181,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 }
 {% endhighlight %}
 
-#### Example usage
+### Example usage
 
 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.
 
diff --git a/docs/layout/media-queries.md b/docs/layout/media-queries.md
index 8ae957890..a72469603 100644
--- a/docs/layout/media-queries.md
+++ b/docs/layout/media-queries.md
@@ -4,9 +4,9 @@ title: Media queries
 group: layout
 ---
 
-Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.
+Since Bootstrap is responsive and designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components that scale to particular viewports and devices.
 
-Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
+Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap primarily uses the following media query ranges—we call them breakpoints—in our source Sass files for our layout, grid system, and components.
 
 {% highlight scss %}
 /* Extra small devices (portrait phones, less than ???px) */
@@ -25,7 +25,8 @@ Media queries allow you to group rulesets by a handful of parameters, most notab
 @media (min-width: 75em) { ... }
 {% endhighlight %}
 
-These media queries are available via Sass mixins:
+Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
+
 {% highlight scss %}
 @include media-breakpoint-up(xs) { ... }
 @include media-breakpoint-up(sm) { ... }
@@ -42,6 +43,7 @@ These media queries are available via Sass mixins:
 {% endhighlight %}
 
 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
+
 {% highlight scss %}
 /* Extra small devices (portrait phones, less than 34em) */
 @media (max-width: 33.9em) { ... }
@@ -59,7 +61,8 @@ We occasionally use media queries that go in the other direction (the given scre
 /* No media query since the extra-large breakpoint has no upper bound on its width */
 {% endhighlight %}
 
-These media queries are available via Sass mixins:
+Once again, these media queries are also available via Sass mixins:
+
 {% highlight scss %}
 @include media-breakpoint-down(xs) { ... }
 @include media-breakpoint-down(sm) { ... }
diff --git a/docs/layout/media.md b/docs/layout/media.md
index f4af28883..79eac7865 100644
--- a/docs/layout/media.md
+++ b/docs/layout/media.md
@@ -4,7 +4,7 @@ title: Media
 group: layout
 ---
 
-Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
+Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned piece of content alongside textual content.
 
 ## Contents
 
@@ -155,15 +155,15 @@ With a bit of extra markup, you can use media inside list (useful for comment th
     </div>
   </li>
   <li class="media">
+    <div class="media-body">
+      <h4 class="media-heading">Media heading</h4>
+      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+    </div>
     <div class="media-right">
       <a href="#">
         <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
       </a>
     </div>
-    <div class="media-body">
-      <h4 class="media-heading">Media heading</h4>
-      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
-    </div>
   </li>
 </ul>
 {% endexample %}