From 2ffa0e44094ab67e23fb1642d6b1b8d269d3a2f1 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 27 Apr 2013 11:55:45 -0700
Subject: [PATCH] Add maximum bounds variables for so our responsive utilities
 don't overlap

---
 docs/assets/css/bootstrap.css  | 2 +-
 less/responsive-utilities.less | 2 +-
 less/variables.less            | 7 +++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

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;