Add an introduction and a table with examples

diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md
index 6f8142b7e158f4bc7b837ae0c82e300b59acd0e4..bfb7f091eaa2b05dcd7946091b4bbc3760168ebb 100644 (file)
--- a/docs/4.0/utilities/display.md
+++ b/docs/4.0/utilities/display.md
@@ -49,9 +49,26 @@ Responsive variations also exist for every single utility mentioned above.
 
 ## Hiding Elements
 
+For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
+
 To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes but it will shows it only on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+
+| Screen Size        | Class |
+| ---                | --- |
+| Hidden on all      | `d-none` |
+| Hidden only on xs  | `d-none d-sm-block` |
+| Hidden only on sm  | `d-sm-none d-md-block` |
+| Hidden only on md  | `d-md-none d-lg-block` |
+| Hidden only on lg  | `d-lg-none d-xl-block` |
+| Hidden only on xl  | `d-xl-none` |
+| Visible on all     | `d-block` |
+| Visible only on xs | `d-block d-sm-none` |
+| Visible only on sm | `d-none d-sm-block d-md-none` |
+| Visible only on md | `d-none d-md-block d-lg-none` |
+| Visible only on lg | `d-none d-lg-block d-xl-none` |
+| Visible only on xl | `d-none d-xl-block` |
 
 ## Display in print