diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index eed5be2e03..604ba03d39 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 78ce60d7fc..1ad16d6fd9 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) {
diff --git a/docs/download.html b/docs/download.html
index 44299b927f..e4097ea4e5 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -143,7 +143,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
       <h3>Responsive</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> Visible/hidden classes</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index dd26412379..017fd493ea 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -609,12 +609,14 @@
       <h3>Test case</h3>
       <p>Resize your browser or load on different devices to test the above classes.</p>
       <h4>Visible on...</h4>
+      <p>Green checkmarks indicate that class is visible in your current viewport.</p>
       <ul class="responsive-utilities-test">
         <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
         <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
         <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
       </ul>
       <h4>Hidden on...</h4>
+      <p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
       <ul class="responsive-utilities-test hidden-on">
         <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
         <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index 0512911485..0e73c44a44 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -66,7 +66,7 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utility-classes.less"> {{_i}}Visible/hidden classes{{/i}}</label>
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index b64c63af3c..6d99965b37 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -532,16 +532,18 @@
       <h3>{{_i}}Test case{{/i}}</h3>
       <p>{{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}</p>
       <h4>{{_i}}Visible on...{{/i}}</h4>
+      <p>{{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test">
-        <li>Phone<span class="visible-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="visible-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="visible-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="visible-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
       <h4>{{_i}}Hidden on...{{/i}}</h4>
+      <p>{{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}</p>
       <ul class="responsive-utilities-test hidden-on">
-        <li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
-        <li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
-        <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
+        <li>{{_i}}Phone{{/i}}<span class="hidden-phone">&#10004; {{_i}}Phone{{/i}}</span></li>
+        <li>{{_i}}Tablet{{/i}}<span class="hidden-tablet">&#10004; {{_i}}Tablet{{/i}}</span></li>
+        <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
       </ul>
     </div><!-- /.span -->
   </div><!-- /.row -->
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
new file mode 100644
index 0000000000..572846c0fa
--- /dev/null
+++ b/less/responsive-utilities.less
@@ -0,0 +1,41 @@
+// RESPONSIVE CLASSES
+// ------------------
+
+// Hide from screenreaders and browsers
+// Credit: HTML5 Boilerplate
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Visibility utilities
+
+// 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; }
+
+// Phones only
+@media (max-width: 767px) {
+  // 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; }
+}
+
+// Tablets & small desktops only
+@media (min-width: 768px) and (max-width: 979px) {
+  // 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 ; }
+}
diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less
deleted file mode 100644
index 78a06e8f94..0000000000
--- a/less/responsive-utility-classes.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// RESPONSIVE CLASSES
-// ------------------
-
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-// Visibility utilities
-
-// For desktops
-.visible-phone     { display: none; }
-.visible-tablet    { display: none; }
-.visible-desktop   { display: block; }
-.hidden-phone      { display: block; }
-.hidden-tablet     { display: block; }
-.hidden-desktop    { display: none; }
-
-// Phones only
-@media (max-width: 767px) {
-  // Show
-  .visible-phone     { display: block; }
-  // Hide
-  .hidden-phone      { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
-
-// Tablets & small desktops only
-@media (min-width: 768px) and (max-width: 979px) {
-  // Show
-  .visible-tablet    { display: block; }
-  // Hide
-  .hidden-tablet     { display: none; }
-  // Hide everything else
-  .hidden-desktop    { display: block; }
-  .visible-desktop   { display: none; }
-}
diff --git a/less/responsive.less b/less/responsive.less
index d35948ddc0..5434f3a08f 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -24,7 +24,7 @@
 // RESPONSIVE CLASSES
 // ------------------
 
-@import "responsive-utility-classes.less";
+@import "responsive-utilities.less";
 
 
 // MEDIA QUERIES