diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 2b4ca441f3..be8236ea37 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -5341,7 +5341,7 @@ a.list-group-item.active > .badge,
   display: inherit !important;
 }
 
-@media (min-width: 768px) and (max-width: 992px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .visible-phone {
     display: none !important;
   }
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 9cea0cef6e..c69851bb96 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -46,7 +46,7 @@
 
 
 // Tablets & small desktops only
-@media (min-width: @screen-tablet) and (max-width: @screen-desktop) {
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
   .visible-phone    { display: none !important; }
   .visible-tablet    { display: inherit !important; }
   .visible-desktop   { display: none !important; }
diff --git a/less/variables.less b/less/variables.less
index e09547e8aa..6cd5b2a485 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -375,12 +375,19 @@
 // Tiny screen / phone
 @screen-tiny:                480px;
 @screen-phone:               @screen-tiny;
+
 // Small screen / tablet
 @screen-small:               768px;
 @screen-tablet:              @screen-small;
+
 // Medium screen / desktop
 @screen-medium:              992px;
 @screen-desktop:             @screen-medium;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          @screen-small-max;
+
 // Large screen / wide desktop
 @screen-large:               1200px;
 @screen-large-desktop:       @screen-large;