[FEATURE] Improved Visibility styles for responsive design

ui/utilities/visibility/flavors/responsive/_index.scss

@@ -13,3 +13,26 @@
 @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} { display: none; }
+  }
+
+  @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} { display: none; }
+  }
+}