Fix responsive utilities for table elements

This change prevents situations where specificity causes some rules to
be overridden by the ones intended for mobile.
* Added mixin `responsive-invisibility()`
* Swapped out `display: none !important;` for new mixin

3 files changed, 117 insertions, 12 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 28f561a32..708ea42ea 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4578,14 +4578,41 @@ td.visible-sm {
   display: none !important;
 }
 
+tr.visible-md {
+  display: none !important;
+}
+
+th.visible-md,
+td.visible-md {
+  display: none !important;
+}
+
 .visible-lg {
   display: none !important;
 }
 
+tr.visible-lg {
+  display: none !important;
+}
+
+th.visible-lg,
+td.visible-lg {
+  display: none !important;
+}
+
 .hidden-sm {
   display: none !important;
 }
 
+tr.hidden-sm {
+  display: none !important;
+}
+
+th.hidden-sm,
+td.hidden-sm {
+  display: none !important;
+}
+
 .hidden-md {
   display: block !important;
 }
@@ -4616,6 +4643,13 @@ td.hidden-lg {
   .visible-sm {
     display: none !important;
   }
+  tr.visible-sm {
+    display: none !important;
+  }
+  th.visible-sm,
+  td.visible-sm {
+    display: none !important;
+  }
   .visible-md {
     display: block !important;
   }
@@ -4629,6 +4663,13 @@ td.hidden-lg {
   .visible-lg {
     display: none !important;
   }
+  tr.visible-lg {
+    display: none !important;
+  }
+  th.visible-lg,
+  td.visible-lg {
+    display: none !important;
+  }
   .hidden-sm {
     display: block !important;
   }
@@ -4642,6 +4683,13 @@ td.hidden-lg {
   .hidden-md {
     display: none !important;
   }
+  tr.hidden-md {
+    display: none !important;
+  }
+  th.hidden-md,
+  td.hidden-md {
+    display: none !important;
+  }
   .hidden-lg {
     display: block !important;
   }
@@ -4658,9 +4706,23 @@ td.hidden-lg {
   .visible-sm {
     display: none !important;
   }
+  tr.visible-sm {
+    display: none !important;
+  }
+  th.visible-sm,
+  td.visible-sm {
+    display: none !important;
+  }
   .visible-md {
     display: none !important;
   }
+  tr.visible-md {
+    display: none !important;
+  }
+  th.visible-md,
+  td.visible-md {
+    display: none !important;
+  }
   .visible-lg {
     display: block !important;
   }
@@ -4694,11 +4756,25 @@ td.hidden-lg {
   .hidden-lg {
     display: none !important;
   }
+  tr.hidden-lg {
+    display: none !important;
+  }
+  th.hidden-lg,
+  td.hidden-lg {
+    display: none !important;
+  }
 }
 
 .visible-print {
   display: none !important;
 }
+tr.visible-print {
+  display: none !important;
+}
+th.visible-print,
+td.visible-print {
+  display: none !important;
+}
 
 @media print {
   .visible-print {
diff --git a/less/mixins.less b/less/mixins.less
index 24ca797ff..3161a845f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -411,6 +411,13 @@
   td& { display: table-cell !important; }
 }
 
+.responsive-invisibility() {
+  display: none !important;
+  tr& { display: none !important; }
+  th&,
+  td& { display: none !important; }
+}
+
 
 
 // Grid System
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 21e5d7556..38dd9639a 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -36,13 +36,19 @@
 // Visibility utilities
 
 // For Phones
-.visible-sm   {
+.visible-sm {
   .responsive-visibility();
 }
-.visible-md { display: none !important; }
-.visible-lg { display: none !important; }
+.visible-md {
+  .responsive-invisibility();
+}
+.visible-lg {
+  .responsive-invisibility();
+}
 
-.hidden-sm { display: none !important; }
+.hidden-sm {
+  .responsive-invisibility();
+}
 .hidden-md {
   .responsive-visibility();
 }
@@ -53,16 +59,22 @@
 
 // Tablets & small desktops only
 @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
-  .visible-sm { display: none !important; }
+  .visible-sm {
+    .responsive-invisibility();
+  }
   .visible-md {
     .responsive-visibility();
   }
-  .visible-lg { display: none !important; }
+  .visible-lg {
+    .responsive-invisibility();
+  }
 
   .hidden-sm {
     .responsive-visibility();
   }
-  .hidden-md { display: none !important; }
+  .hidden-md {
+    .responsive-invisibility();
+  }
   .hidden-lg {
     .responsive-visibility();
   }
@@ -70,8 +82,12 @@
 
 // For desktops
 @media (min-width: @screen-desktop) {
-  .visible-sm { display: none !important; }
-  .visible-md { display: none !important; }
+  .visible-sm {
+    .responsive-invisibility();
+  }
+  .visible-md {
+    .responsive-invisibility();
+  }
   .visible-lg {
     .responsive-visibility();
   }
@@ -82,16 +98,22 @@
   .hidden-md {
     .responsive-visibility();
   }
-  .hidden-lg { display: none !important; }
+  .hidden-lg {
+    .responsive-invisibility();
+  }
 }
 
 // Print utilities
-.visible-print { display: none !important; }
+.visible-print {
+  .responsive-invisibility();
+}
 .hidden-print  { }
 
 @media print {
   .visible-print {
     .responsive-visibility();
   }
-  .hidden-print { display: none !important; }
+  .hidden-print {
+    .responsive-invisibility();
+  }
 }