fix(layout): hide/show with breakpoints

Hide with breakpoints should account for smaller breakpoints with show-gt-<xx> settings.

* update the tips section with improved demo.

docs/app/partials/layout-tips.tmpl.html

@@ -89,15 +89,21 @@ <h3>Layout Column</h3>
   </p>
 
   <div class="md-whiteframe-3dp">
-    <iframe height='459' scrolling='no'
-            src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=459&theme-id=21180&default-tab=result'
+
+    <iframe height='700' scrolling='no'
+            src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=700&theme-id=21180&default-tab=result'
             frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
         href='http://codepen.io/team/AngularMaterial/pen/obgapg/'>Card Layouts (corrected)</a> by Angular Material (<a
         href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a href='http://codepen.io'>CodePen</a>.
     </iframe>
+
   </div>
 
-    <p>This is easily fixed simply by inverting the layout logic so that the default is <code>layout='row'</code> </p>
+    <p>
+      This is easily fixed simply by inverting the layout logic so that the default is <code>layout='row'</code>.
+      To see how the layout changes, shrink the browser window its width is <600px;
+    </p>
+
 
   <br/>
   <hr/>

src/core/services/layout/layout.scss

@@ -450,7 +450,7 @@
       display: none;
     }
   }
-  .hide-sm:not(.show-sm):not(.show) {
+  .hide-sm:not(.show-gt-xs):not(.show-sm):not(.show) {
     display: none;
   }
 
@@ -470,7 +470,7 @@
       display: none;
     }
   }
-  .hide-md:not(.show-md):not(.show) {
+  .hide-md:not(.show-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
     display: none;
   }
   @include layouts_for_breakpoint(md);
@@ -488,7 +488,7 @@
       display: none;
     }
   }
-  .hide-lg:not(.show-lg):not(.show) {
+  .hide-lg:not(.show-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
     display: none;
   }
 
@@ -505,7 +505,7 @@
       display: none;
     }
   }
-  .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show) {
+  .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
     display: none;
   }