From f058a6a3ea6196af859303ff4611fd9807842f7d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 14 Aug 2013 23:52:57 -0700
Subject: [PATCH] fixes #9522

---
 assets/css/docs.css | 20 ++++++++++++++++----
 css.html            |  2 ++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/css/docs.css b/assets/css/docs.css
index 81f97accc8..5e0aaa0aaf 100644
--- a/assets/css/docs.css
+++ b/assets/css/docs.css
@@ -642,13 +642,25 @@ body {
   text-align: center;
   border-radius: 4px;
 }
-.responsive-utilities-test.visible-on [class*="hidden"],
-.responsive-utilities-test.hidden-on [class*="visible"] {
+.visible-on .col-xs-6 .hidden-xs,
+.visible-on .col-xs-6 .hidden-sm,
+.visible-on .col-xs-6 .hidden-md,
+.visible-on .col-xs-6 .hidden-lg,
+.hidden-on .col-xs-6 .visible-xs,
+.hidden-on .col-xs-6 .visible-sm,
+.hidden-on .col-xs-6 .visible-md,
+.hidden-on .col-xs-6 .visible-lg {
   color: #999;
   border: 1px solid #ddd;
 }
-.responsive-utilities-test.visible-on [class*="visible"],
-.responsive-utilities-test.hidden-on [class*="hidden"] {
+.visible-on .col-xs-6 .visible-xs,
+.visible-on .col-xs-6 .visible-sm,
+.visible-on .col-xs-6 .visible-md,
+.visible-on .col-xs-6 .visible-lg,
+.hidden-on .col-xs-6 .hidden-xs,
+.hidden-on .col-xs-6 .hidden-sm,
+.hidden-on .col-xs-6 .hidden-md,
+.hidden-on .col-xs-6 .hidden-lg {
   color: #468847;
   background-color: #dff0d8;
   border: 1px solid #d6e9c6;
diff --git a/css.html b/css.html
index a2cfd5f74a..cc46e6cebd 100644
--- a/css.html
+++ b/css.html
@@ -2254,6 +2254,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="hidden-sm">Small</span>
         <span class="visible-sm">&#10004; Visible on small</span>
       </div>
+      <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-3">
         <span class="hidden-md">Medium</span>
         <span class="visible-md">&#10004; Visible on medium</span>
@@ -2274,6 +2275,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="visible-sm">Small</span>
         <span class="hidden-sm">&#10004; Hidden on small</span>
       </div>
+      <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-3">
         <span class="visible-md">Medium</span>
         <span class="hidden-md">&#10004; Hidden on medium</span>