fixes #9522

diff --git a/assets/css/docs.css b/assets/css/docs.css
index 81f97accc8df0f8d494fd4499a68967929691588..5e0aaa0aafa182fbadc5e97244d716d05e31e97b 100644 (file)
--- 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 a2cfd5f74a4f50ae8d4e50c9b62817173cad614d..cc46e6cebd04ac4fe9af8429a29f410a80a0f1e1 100644 (file)
--- 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>