Fixes #4002 responsive utilities classes

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index a584b806e639297a73f9798b600b47c6676f404d..8916f313c15896385868f5e14b7c70cbd15c1524 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -57,32 +57,36 @@
   display: none !important;
 }
 
+.visible-desktop {
+  display: inherit !important;
+}
+
 @media (min-width: 768px) and (max-width: 979px) {
-  .visible-tablet {
-    display: inherit !important;
-  }
-  .hidden-tablet {
-    display: none !important;
-  }
   .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;
   }
 }

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 59deafe81ca930a0342e4d79ab96368a6eaf54e8..2c3f6c15fe2e55e2d0ec43f3a4c81667601f96b4 100644 (file)
--- a/less/responsive-utilities.less
+++ b/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; }
 }

diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 4b8b1a2772fb21bbbd1a0a5499d9b8bdc18f58ab..341c8026458db363601be6de5c3f2897bcdfef4d 100644 (file)
--- a/less/tests/css-tests.html
+++ b/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>
+