Fixes #10126: Update responsive test cases to properly highlight hidden class examples

2 files changed, 29 insertions, 29 deletions

diff --git a/css.html b/css.html
index 904fdaab4..69f1c4c50 100644
--- a/css.html
+++ b/css.html
@@ -2570,52 +2570,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h3>Hidden on...</h3>
-    <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
+    <p>Here, green checkmarks also indicate the element <strong>is hidden</strong> in your current viewport.</p>
     <div class="row responsive-utilities-test hidden-on">
       <div class="col-xs-6 col-sm-3">
-        <span class="visible-xs">Extra small</span>
-        <span class="hidden-xs">&#10004; Hidden on x-small</span>
+        <span class="hidden-xs">Extra small</span>
+        <span class="visible-xs">&#10004; Hidden on x-small</span>
       </div>
       <div class="col-xs-6 col-sm-3">
-        <span class="visible-sm">Small</span>
-        <span class="hidden-sm">&#10004; Hidden on small</span>
+        <span class="hidden-sm">Small</span>
+        <span class="visible-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>
+        <span class="hidden-md">Medium</span>
+        <span class="visible-md">&#10004; Hidden on medium</span>
       </div>
       <div class="col-xs-6 col-sm-3">
-        <span class="visible-lg">Large</span>
-        <span class="hidden-lg">&#10004; Hidden on large</span>
+        <span class="hidden-lg">Large</span>
+        <span class="visible-lg">&#10004; Hidden on large</span>
       </div>
     </div>
     <div class="row responsive-utilities-test hidden-on">
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-xs visible-sm">Extra small and small</span>
-        <span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
+        <span class="hidden-xs hidden-sm">Extra small and small</span>
+        <span class="visible-xs visible-sm">&#10004; Hidden on x-small and small</span>
       </div>
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-md visible-lg">Medium and large</span>
-        <span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
+        <span class="hidden-md hidden-lg">Medium and large</span>
+        <span class="visible-md visible-lg">&#10004; Hidden on medium and large</span>
       </div>
       <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-xs visible-md">Extra small and medium</span>
-        <span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
+        <span class="hidden-xs hidden-md">Extra small and medium</span>
+        <span class="visible-xs visible-md">&#10004; Hidden on x-small and medium</span>
       </div>
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-sm visible-lg">Small and large</span>
-        <span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
+        <span class="hidden-sm hidden-lg">Small and large</span>
+        <span class="visible-sm visible-lg">&#10004; Hidden on small and large</span>
       </div>
       <div class="clearfix visible-xs"></div>
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-xs visible-lg">Extra small and large</span>
-        <span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
+        <span class="hidden-xs hidden-lg">Extra small and large</span>
+        <span class="visible-xs visible-lg">&#10004; Hidden on x-small and large</span>
       </div>
       <div class="col-xs-6 col-sm-6">
-        <span class="visible-sm visible-md">Small and medium</span>
-        <span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
+        <span class="hidden-sm hidden-md">Small and medium</span>
+        <span class="visible-sm visible-md">&#10004; Hidden on small and medium</span>
       </div>
     </div>
 
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index fa472f080..a94f61934 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -961,10 +961,10 @@ h1[id] {
 .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 {
+.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: #999;
   border: 1px solid #ddd;
 }
@@ -972,10 +972,10 @@ h1[id] {
 .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 {
+.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: #468847;
   background-color: #dff0d8;
   border: 1px solid #d6e9c6;