diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss
index c90cde70b0..60156e636a 100644
--- a/ui/utilities/visibility/flavors/responsive/_index.scss
+++ b/ui/utilities/visibility/flavors/responsive/_index.scss
@@ -13,3 +13,32 @@
@include visibility(small, $mq-small, $mq-medium);
@include visibility(medium, $mq-medium, $mq-large);
@include visibility(large, $mq-large);
+
+// Generates responsive visibility tags
+@each $key, $value in (
+ 'x-small': $mq-x-small,
+ 'small': $mq-small,
+ 'medium': $mq-medium,
+ 'large': $mq-large,
+ 'x-large': $mq-x-large,
+) {
+ @media(min-width: $value) {
+ // [EXAMPLE] slds-hide--medium:
+ // HIDES the element when window is BIGGER than medium.
+ // element will be displayed normaly when window is smaller.
+ .slds-hide--#{$key} {
+ // !important is required to increase specificity
+ display: none !important;
+ }
+ }
+
+ @media(max-width: $value - 1px) {
+ // [EXAMPLE] slds-show--medium:
+ // HIDES the element when window is SMALLER than medium.
+ // element will be displayed normaly when window is bigger.
+ .slds-show--#{$key} {
+ // !important is required to increase specificity
+ display: none !important;
+ }
+ }
+}
diff --git a/ui/utilities/visibility/flavors/responsive/index.markup.md b/ui/utilities/visibility/flavors/responsive/index.markup.md
index fedd4eeea4..29d95a1ecc 100644
--- a/ui/utilities/visibility/flavors/responsive/index.markup.md
+++ b/ui/utilities/visibility/flavors/responsive/index.markup.md
@@ -1,4 +1,7 @@
-Responsive visibility classes will show and hide content on specific breakpoints. By default, -show renders as display: block;, but you may pass through a display property of your choice by adding a modifier to the end of the classname. For example, you may need to render an element as display: inline-block at a medium breakpoint, adding --inline-block to the end of .slds-medium-show to produce the class of .slds-medium-show--inline-block will give you that outcome.
+Responsive visibility classes will HIDE content on specific breakpoints.
+slds-show--[breakpoint] renders display: none; when the the view port width is smaller than the breakpoint, and do nothing if it is bigger or equal.
+slds-hide--[breakpoint] does the oposite by rendering display: none; when the the view port width is bigger or equal than the breakpoint, and do nothing if it is smaller.
+
@@ -6,101 +9,101 @@
| Class Name |
Less than 320px |
- X-Small (320px) |
- Small (480px) |
- Medium (768px) |
- Large (1024px) |
- Greater than 1024px |
+ X-Small (>= 320px) |
+ Small (>= 480px) |
+ Medium (>= 768px) |
+ Large (>= 1024px) |
+ X-Large (>= 1280px) |
- .slds-x-small-show |
- Hide |
- Show |
- Show |
- Show |
- Show |
+ .slds-hide--x-small |
Show |
+ Hide |
+ Hide |
+ Hide |
+ Hide |
+ Hide |
- .slds-small-show |
- Hide |
+ .slds-show--x-small |
Hide |
Show |
Show |
Show |
Show |
+ Show |
- .slds-medium-show |
+ .slds-hide--small |
+ Show |
+ Show |
+ Hide |
Hide |
Hide |
Hide |
- Show |
- Show |
- Show |
- .slds-large-show |
- Hide |
- Hide |
+ .slds-show--small |
Hide |
Hide |
Show |
Show |
+ Show |
+ Show |
- .slds-x-small-show-only |
- Hide |
+ .slds-hide--medium |
+ Show |
+ Show |
Show |
- Hide |
Hide |
Hide |
Hide |
- .slds-small-show-only |
+ .slds-show--medium |
Hide |
Hide |
- Show |
Hide |
+ Show |
+ Show |
+ Show |
+
+
+ .slds-hide--large |
+ Show |
+ Show |
+ Show |
+ Show |
Hide |
Hide |
- .slds-medium-show-only |
+ .slds-show--large |
Hide |
Hide |
Hide |
- Show |
- Hide |
Hide |
+ Show |
+ Show |
- .slds-max-x-small-hide |
+ .slds-hide--x-large |
+ Show |
+ Show |
+ Show |
+ Show |
+ Show |
Hide |
- Initial |
- Initial |
- Initial |
- Initial |
- Initial |
- .slds-max-small-hide |
+ .slds-show--x-large |
Hide |
Hide |
- Initial |
- Initial |
- Initial |
- Initial |
-
-
- .slds-max-medium-hide |
Hide |
Hide |
Hide |
- Initial |
- Initial |
- Initial |
+ Show |
diff --git a/ui/utilities/visibility/flavors/responsive/index.react.example.jsx b/ui/utilities/visibility/flavors/responsive/index.react.example.jsx
index 985d2f6cfa..82961e09d1 100644
--- a/ui/utilities/visibility/flavors/responsive/index.react.example.jsx
+++ b/ui/utilities/visibility/flavors/responsive/index.react.example.jsx
@@ -15,18 +15,19 @@ import CodeClass from 'app_modules/site/components/code-class';
export default (
-
Show on 320px and up
-
Show only between 320px and 479px
-
Hide on 319px and down
+
Hides on 319px and down
+
Hides on 320px and up
-
Show on 480px and up
-
Show only between 480px and 767px
-
Hide on 479px and down
+
Hides on 479px and down
+
Hides on 480px and up
-
Show on 768px and up
-
Show only between 768px and 1023px
-
Hide on 1023px and down
+
Hides on 767px and down
+
Hides on 768px and up
-
Show on 1024px and up
+
Hides on 1023px and down
+
Hides on 1024px and up
+
+
Hides on 1279px and down
+
Hides on 1280px and up
);