Overhaul the responsive utility classes:

1. Rename file from responsive-utility-classes.less to responsive-utilities.less
2. Add additional help text around the documentation for the classes in Scaffolding
3. Remove unnecessary display values on initial classes
4. Drop block values for inherit for better support on inline and table elements
5. Make use of \!important on every class to avoid classes with more specific selectors (e.g., .span* classes for the grid)

1 files changed, 11 insertions, 20 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 78ce60d7f..1ad16d6fd 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -43,49 +43,40 @@
   visibility: hidden;
 }
 .visible-phone {
-  display: none;
+  display: none !important;
 }
 .visible-tablet {
-  display: none;
-}
-.visible-desktop {
-  display: block;
-}
-.hidden-phone {
-  display: block;
-}
-.hidden-tablet {
-  display: block;
+  display: none !important;
 }
 .hidden-desktop {
-  display: none;
+  display: none !important;
 }
 @media (max-width: 767px) {
   .visible-phone {
-    display: block;
+    display: inherit !important;
   }
   .hidden-phone {
-    display: none;
+    display: none !important;
   }
   .hidden-desktop {
-    display: block;
+    display: inherit !important;
   }
   .visible-desktop {
-    display: none;
+    display: none !important;
   }
 }
 @media (min-width: 768px) and (max-width: 979px) {
   .visible-tablet {
-    display: block;
+    display: inherit !important;
   }
   .hidden-tablet {
-    display: none;
+    display: none !important;
   }
   .hidden-desktop {
-    display: block;
+    display: inherit !important;
   }
   .visible-desktop {
-    display: none;
+    display: none !important ;
   }
 }
 @media (max-width: 480px) {