update responsive utility docs post-overhaul

1 files changed, 28 insertions, 8 deletions

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 8d68e3187..bf16e82a5 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1244,10 +1244,7 @@ body {
 .visible-on,
 .hidden-on {
   .col-xs-6 {
-    .hidden-xs,
-    .hidden-sm,
-    .hidden-md,
-    .hidden-lg {
+    > .not-visible {
       color: #999;
       border: 1px solid #ddd;
     }
@@ -1256,10 +1253,7 @@ body {
 .visible-on,
 .hidden-on {
   .col-xs-6 {
-    .visible-xs-block,
-    .visible-sm-block,
-    .visible-md-block,
-    .visible-lg-block {
+    .visible {
       color: #468847;
       background-color: #dff0d8;
       border: 1px solid #d6e9c6;
@@ -1267,6 +1261,32 @@ body {
   }
 }
 
+@include media-breakpoint-only(xs) {
+  .hidden-xs-only {
+    display: none !important;
+  }
+}
+@include media-breakpoint-only(sm) {
+  .hidden-sm-only {
+    display: none !important;
+  }
+}
+@include media-breakpoint-only(md) {
+  .hidden-md-only {
+    display: none !important;
+  }
+}
+@include media-breakpoint-only(lg) {
+  .hidden-lg-only {
+    display: none !important;
+  }
+}
+@include media-breakpoint-only(xl) {
+  .hidden-xl-only {
+    display: none !important;
+  }
+}
+
 //
 // Brand guidelines
 //