Fixes #4002 responsive utilities classes

docs/assets/css/bootstrap-responsive.css

@@ -57,32 +57,36 @@
   display: none !important;
 }
 
-@media (min-width: 768px) and (max-width: 979px) {
-  .visible-tablet {
+.visible-desktop {
   display: inherit !important;
-  }
-  .hidden-tablet {
-    display: none !important;
-  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
   .hidden-desktop {
     display: inherit !important;
   }
   .visible-desktop {
     display: none !important ;
   }
+  .visible-tablet {
+    display: inherit !important;
+  }
+  .hidden-tablet {
+    display: none !important;
+  }
 }
 
 @media (max-width: 767px) {
-  .visible-phone {
+  .hidden-desktop {
     display: inherit !important;
   }
-  .hidden-phone {
+  .visible-desktop {
     display: none !important;
   }
-  .hidden-desktop {
+  .visible-phone {
     display: inherit !important;
   }
-  .visible-desktop {
+  .hidden-phone {
     display: none !important;
   }
 }

less/responsive-utilities.less

@@ -15,29 +15,29 @@
 // For desktops
 .visible-phone     { display: none !important; }
 .visible-tablet    { display: none !important; }
-.visible-desktop   { } // Don't set initially
 .hidden-phone      { }
 .hidden-tablet     { }
 .hidden-desktop    { display: none !important; }
+.visible-desktop   { display: inherit !important; }
 
 // Tablets & small desktops only
 @media (min-width: 768px) and (max-width: 979px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important ; }
   // Show
   .visible-tablet    { display: inherit !important; }
   // Hide
   .hidden-tablet     { display: none !important; }
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important ; }
 }
 
 // Phones only
 @media (max-width: 767px) {
+  // Hide everything else
+  .hidden-desktop    { display: inherit !important; }
+  .visible-desktop   { display: none !important; }
   // Show
   .visible-phone     { display: inherit !important; } // Use inherit to restore previous behavior
   // Hide
   .hidden-phone      { display: none !important; }
-  // Hide everything else
-  .hidden-desktop    { display: inherit !important; }
-  .visible-desktop   { display: none !important; }
 }

less/tests/css-tests.html

@@ -1019,6 +1019,37 @@
 
 
 
+<!-- Responsive utility classes
+================================================== -->
+
+<div class="page-header">
+  <h1>Responsive utility classes</h1>
+</div>
+
+<h4>Visible on...</h4>
+<ul class="responsive-utilities-test visible-on">
+  <li>Phone<span class="visible-phone">✔ Phone</span></li>
+  <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
+  <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
+</ul>
+<ul class="responsive-utilities-test visible-on">
+  <li>Phone + Tablet<span class="visible-phone visible-tablet">✔ Phone + Tablet</span></li>
+  <li>Tablet + Desktop<span class="visible-tablet visible-desktop">✔ Tablet + Desktop</span></li>
+  <li>All<span class="visible-phone visible-tablet visible-desktop">✔ All</span></li>
+</ul>
+
+<h4>Hidden on...</h4>
+<ul class="responsive-utilities-test hidden-on">
+  <li>Phone<span class="hidden-phone">✔ Phone</span></li>
+  <li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
+  <li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
+</ul>
+<ul class="responsive-utilities-test hidden-on">
+  <li>Phone + Tablet<span class="hidden-phone hidden-tablet">✔ Phone + Tablet</span></li>
+  <li>Tablet + Desktop<span class="hidden-tablet hidden-desktop">✔ Tablet + Desktop</span></li>
+  <li>All<span class="hidden-phone hidden-tablet hidden-desktop">✔ All</span></li>
+</ul>
+