add docs example for #10938 to show responsive column clearing in grid

diff --git a/css.html b/css.html
index 653ede7ccea3632bb42b21bc08dde7a7dbd548b0..63cd74b1dd97e20ceca180bc1b9c8d5a56cc6219 100644 (file)
--- a/css.html
+++ b/css.html
@@ -314,6 +314,22 @@ base_url: "../"
 
     <h3 id="grid-responsive-resets">Responsive column resets</h3>
     <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="../css#responsive-utilities">responsive utility classes</a>.</p>
+<div class="bs-docs-grid">
+  <div class="row show-grid">
+    <div class="col-xs-6 col-sm-3">
+      .col-xs-6 .col-sm-3
+      <br>
+      Resize your viewport or check it out on your phone for an example.
+    </div>
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+    <!-- Add the extra clearfix for only the required viewport -->
+    <div class="clearfix visible-xs"></div>
+
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+  </div>
+</div>
 {% highlight html %}
 <div class="row">
   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>