Scope tablet classes to tablets range only

Fixes #9128

dist/css/bootstrap.css

@@ -873,7 +873,7 @@ pre code {
   width: 100%;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .container {
     max-width: 728px;
   }

less/grid.less

@@ -92,7 +92,7 @@
 .col-12 { width: 100%; }
 
 // Small device columns (phones to tablets)
-@media (min-width: @screen-tablet) {
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
   .container {
     max-width: @container-tablet;
   }

less/variables.less

@@ -197,14 +197,16 @@
 @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;
 
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max:           (@screen-medium - 1);
+@screen-tablet-max:          (@screen-desktop - 1);
+@screen-desktop-max:         (@screen-large-desktop - 1);
+
+
 // Grid system
 // --------------------------------------------------