fixes grid gutter docs example

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 338537dd5af867c927ba08c181e950d26b6d2cda..3d4b235d506004700cbc2fe7a288c575e94c6124 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -252,14 +252,16 @@ There are times when you won't want each media query to be collapsed or uncollap
 <div class="row medium-uncollapse large-collapse">
   <div class="small-6 columns">
     <div class="callout secondary">
+      <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
-      <p class="show-for-large-up">On a large screen, I have no gutters!</p>
+      <p class="show-for-large">On a large screen, I have no gutters!</p>
     </div>
   </div>
   <div class="small-6 columns">
     <div class="callout secondary">
+      <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
-      <p class="show-for-large-up">On a large screen, I have no gutters!</p>
+      <p class="show-for-large">On a large screen, I have no gutters!</p>
     </div>
   </div>
 </div>

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 8e4a92c2c0678c304c5ccacbd3d63eb593f8b5e5..8fed8926761e0a3c95e14bae1d9f55e945a385e6 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -327,14 +327,14 @@ There are times when you won't want each media query to be collapsed or uncollap
     <div class="callout secondary">
       <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
-      <p class="show-for-large-up">On a large screen, I have no gutters!</p>
+      <p class="show-for-large">On a large screen, I have no gutters!</p>
     </div>
   </div>
   <div class="small-6 columns">
     <div class="callout secondary">
       <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
-      <p class="show-for-large-up">On a large screen, I have no gutters!</p>
+      <p class="show-for-large">On a large screen, I have no gutters!</p>
     </div>
   </div>
 </div>