From f734814f6ba6c86673f771b073425ca6f7f72693 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Mon, 31 Oct 2016 21:13:05 -0700
Subject: Make spacer utils responsive (#20926)

* make spacer utils responsive by grid tier
* update scale to add two levels, document them
* change responsive spacing utils to avoid the xs abbreviation in the class name for that tier
* update code snippet to match source
* update usage in our docs
* linter
* docs updates
---
 docs/layout/media-object.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs/layout')

diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md
index b998490d3..846330604 100644
--- a/docs/layout/media-object.md
+++ b/docs/layout/media-object.md
@@ -46,7 +46,7 @@ Media components can also be nested.
   <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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-    <div class="media mt-2">
+    <div class="media mt-3">
       <a class="media-left" href="#">
         <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
       </a>
@@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
       <h4 class="media-heading">Media heading</h4>
       <p>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.</p>
       <!-- Nested media object -->
-      <div class="media mt-2">
+      <div class="media mt-3">
         <a class="media-left" href="#">
           <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
         </a>
@@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
           <h4 class="media-heading">Nested 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.
           <!-- Nested media object -->
-          <div class="media mt-2">
+          <div class="media mt-3">
             <div class="media-left">
               <a href="#">
                 <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
         </div>
       </div>
       <!-- Nested media object -->
-      <div class="media mt-2">
+      <div class="media mt-3">
         <div class="media-left">
           <a href="#">
             <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
       </div>
     </div>
   </li>
-  <li class="media mt-2">
+  <li class="media mt-3">
     <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.
-- 
cgit v1.2.3