Add maximum bounds variables for so our responsive utilities don't overlap

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;
   }

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; }

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;