First pass at updated responsive utilities to be mobile-first. Pulled from #7490...

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1e86761f472504178815b44e718481ba283db0f3..d24999c4a96d5b45343976a3e2e0f9a71ad111b7 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5310,47 +5310,67 @@ a.list-group-item.active > .badge,
 }
 
 .visible-phone {
-  display: none !important;
+  display: inherit !important;
 }
 
 .visible-tablet {
   display: none !important;
 }
 
-.hidden-desktop {
+.visible-desktop {
   display: none !important;
 }
 
-.visible-desktop {
+.hidden-phone {
+  display: none !important;
+}
+
+.hidden-tablet {
+  display: inherit !important;
+}
+
+.hidden-desktop {
   display: inherit !important;
 }
 
 @media (min-width: 768px) and (max-width: 979px) {
-  .hidden-desktop {
+  .visible-phone {
+    display: none !important;
+  }
+  .visible-tablet {
     display: inherit !important;
   }
   .visible-desktop {
-    display: none !important ;
+    display: none !important;
   }
-  .visible-tablet {
+  .hidden-phone {
     display: inherit !important;
   }
   .hidden-tablet {
     display: none !important;
   }
-}
-
-@media (max-width: 767px) {
   .hidden-desktop {
     display: inherit !important;
   }
-  .visible-desktop {
+}
+
+@media (min-width: 980px) {
+  .visible-phone {
     display: none !important;
   }
-  .visible-phone {
+  .visible-tablet {
+    display: none !important;
+  }
+  .visible-desktop {
     display: inherit !important;
   }
   .hidden-phone {
+    display: inherit !important;
+  }
+  .hidden-tablet {
+    display: inherit !important;
+  }
+  .hidden-desktop {
     display: none !important;
   }
 }

diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index bf43e8ef73994c71dd69dd40839f835dbed592f9..60c51c5b9aec588eefef17622355aeee0dc823cd 100644 (file)
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -19,34 +19,36 @@
 
 // Visibility utilities
 
-// For desktops
-.visible-phone     { display: none !important; }
+// For Phones
+.visible-phone     { display: inherit !important; }
 .visible-tablet    { display: none !important; }
-.hidden-phone      { }
-.hidden-tablet     { }
-.hidden-desktop    { display: none !important; }
-.visible-desktop   { display: inherit !important; }
+.visible-desktop   { display: none !important; }
+
+.hidden-phone      { display: none !important; }
+.hidden-tablet     { display: inherit !important; }
+.hidden-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-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
-  // Hide
+  .visible-desktop   { display: none !important; }
+
+  .hidden-phone      { display: inherit !important; }
   .hidden-tablet     { display: none !important; }
+  .hidden-desktop    { display: inherit !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; }
+// For desktops
+@media (min-width: 980px) {
+  .visible-phone     { display: none !important; }
+  .visible-tablet    { display: none !important; }
+  .visible-desktop   { display: inherit !important; }
+
+  .hidden-phone      { display: inherit !important; }
+  .hidden-tablet     { display: inherit !important; }
+  .hidden-desktop    { display: none !important; }
 }
 
 // Print utilities
@@ -56,4 +58,4 @@
 @media print {
   .visible-print  { display: inherit !important; }
   .hidden-print   { display: none !important; }
-}
+}
\ No newline at end of file