Merge pull request #3 from twbs/v4_grid

Add new grid tier

Merge pull request #3 from twbs/v4_grid
Add new grid tier
a4e991c1 · Mark Otto · 8454382b · bc3a2f66 · a4e991c1 · a4e991c1
Commit a4e991c1 authored 10 years ago by Mark Otto
Expand all Hide whitespace changes
Inline Side-by-side

Showing

with 678 additions and 100 deletions
+678 -100
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -595,7 +595,7 @@ dd {
 .dl-horizontal dd:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 155, /Users/mdo/work/bootstrap/scss/type */
  .dl-horizontal dt {
    float: left;
@@ -748,6 +748,11 @@ pre code {
 .container:after {
  clear: both;
 }
+@media (min-width: 34em) {
+  .container {
+    max-width: 34em;
+  }
+}
 @media (min-width: 48em) {
  .container {
    max-width: 45rem;
@@ -758,11 +763,6 @@ pre code {
    max-width: 60rem;
  }
 }
-@media (min-width: 75em) {
-  .container {
-    max-width: 72.25rem;
-  }
-}
 /* line 30, /Users/mdo/work/bootstrap/scss/grid */
 .container-fluid {
@@ -797,7 +797,7 @@ pre code {
 }
 /* line 11, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: .75rem; 
@@ -1064,7 +1064,7 @@ pre code {
  margin-left: 100%;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
@@ -1326,7 +1326,7 @@ pre code {
  }
 }
-@media (min-width: 62em) {
+@media (min-width: 48em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
@@ -1588,7 +1588,7 @@ pre code {
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
@@ -1850,6 +1850,268 @@ pre code {
  }
 }
+@media (min-width: 62em) {
+  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
+    float: left;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-1 {
+    width: 8.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-2 {
+    width: 16.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-3 {
+    width: 25%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-4 {
+    width: 33.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-5 {
+    width: 41.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-6 {
+    width: 50%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-7 {
+    width: 58.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-8 {
+    width: 66.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-9 {
+    width: 75%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-10 {
+    width: 83.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-11 {
+    width: 91.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-12 {
+    width: 100%;
+  }
+  /* line 55, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-0 {
+    right: auto;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-1 {
+    right: 8.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-2 {
+    right: 16.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-3 {
+    right: 25%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-4 {
+    right: 33.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-5 {
+    right: 41.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-6 {
+    right: 50%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-7 {
+    right: 58.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-8 {
+    right: 66.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-9 {
+    right: 75%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-10 {
+    right: 83.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-11 {
+    right: 91.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-12 {
+    right: 100%;
+  }
+  /* line 45, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-0 {
+    left: auto;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-1 {
+    left: 8.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-2 {
+    left: 16.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-3 {
+    left: 25%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-4 {
+    left: 33.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-5 {
+    left: 41.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-6 {
+    left: 50%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-7 {
+    left: 58.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-8 {
+    left: 66.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-9 {
+    left: 75%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-10 {
+    left: 83.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-11 {
+    left: 91.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-12 {
+    left: 100%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-0 {
+    margin-left: 0;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-1 {
+    margin-left: 8.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-2 {
+    margin-left: 16.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-3 {
+    margin-left: 25%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-4 {
+    margin-left: 33.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-5 {
+    margin-left: 41.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-6 {
+    margin-left: 50%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-7 {
+    margin-left: 58.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-8 {
+    margin-left: 66.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-9 {
+    margin-left: 75%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-10 {
+    margin-left: 83.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-11 {
+    margin-left: 91.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-12 {
+    margin-left: 100%;
+  }
+}
 /* line 5, /Users/mdo/work/bootstrap/scss/tables */
 table {
  background-color: transparent;
@@ -1988,7 +2250,7 @@ table td[class*="col-"], table th[class*="col-"] {
  min-height: .01%; 
  overflow-x: auto;
 }
-@media screen and (max-width: 47.9em) {
+@media screen and (max-width: 33.9em) {
  .table-responsive {
    width: 100%;
    margin-bottom: 1rem;
@@ -2516,7 +2778,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
  color: #747a7f;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 423, /Users/mdo/work/bootstrap/scss/forms */
  .form-inline .form-group, .navbar-form .form-group {
    display: inline-block;
@@ -2605,7 +2867,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
 .form-horizontal .form-group:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 523, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .control-label {
    padding-top: .6rem; 
@@ -2617,13 +2879,13 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
 .form-horizontal .has-feedback .form-control-feedback {
  right: .75rem;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 544, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .form-group-lg .control-label {
    padding-top: .75rem;
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 551, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .form-group-sm .control-label {
    padding-top: .4rem;
@@ -3593,7 +3855,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 .navbar:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar {
    border-radius: .25rem;
  }
@@ -3604,7 +3866,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  z-index: 1000;
  border-width: 0 0 1px;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-static-top {
    border-radius: 0;
  }
@@ -3617,7 +3879,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  left: 0;
  z-index: 1030;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
  }
@@ -3681,7 +3943,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
@@ -3690,7 +3952,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
    margin-bottom: 0;
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-form {
    width: auto;
    padding-top: 0;
@@ -3718,7 +3980,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  border-bottom-left-radius: 0;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-text {
    float: left;
    margin-right: 1rem; 
@@ -3726,7 +3988,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 268, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-right {
    margin-right: -1rem;
@@ -3795,7 +4057,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  color: #555; 
  background-color: #e7e7e7;
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  /* line 359, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
@@ -3913,7 +4175,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  color: #fff; 
  background-color: #1f2021;
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  /* line 517, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #1f2021;
@@ -4457,7 +4719,7 @@ a.badge:hover, a.badge:focus {
  border-top-color: #d0d5d8;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/jumbotron */
  .jumbotron {
    padding: 3.2rem 0;
@@ -5233,7 +5495,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  overflow: scroll;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 133, /Users/mdo/work/bootstrap/scss/modal */
  .modal-dialog {
    width: 600px;
@@ -5252,7 +5514,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  }
 }
-@media (min-width: 62em) {
+@media (min-width: 48em) {
  /* line 146, /Users/mdo/work/bootstrap/scss/modal */
  .modal-lg {
    width: 900px;
@@ -5731,7 +5993,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  text-shadow: none;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 226, /Users/mdo/work/bootstrap/scss/carousel */
  .carousel-control .icon-prev, .carousel-control .icon-next {
    width: 30px;
@@ -6009,93 +6271,93 @@ a.bg-danger:hover {
  display: none !important;
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-block {
    display: block !important;
  }
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-inline {
    display: inline !important;
  }
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-block {
    display: block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-inline {
    display: inline !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-block {
    display: block !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-inline {
    display: inline !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-block {
    display: block !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-inline {
    display: inline !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-sm {
    display: none !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-md {
    display: none !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-lg {
    display: none !important;

--- a/dist/css/bootstrap.css.map
+++ b/dist/css/bootstrap.css.map
--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/docs/dist/css/bootstrap.css
+++ b/docs/dist/css/bootstrap.css
@@ -595,7 +595,7 @@ dd {
 .dl-horizontal dd:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 155, /Users/mdo/work/bootstrap/scss/type */
  .dl-horizontal dt {
    float: left;
@@ -748,6 +748,11 @@ pre code {
 .container:after {
  clear: both;
 }
+@media (min-width: 34em) {
+  .container {
+    max-width: 34em;
+  }
+}
 @media (min-width: 48em) {
  .container {
    max-width: 45rem;
@@ -758,11 +763,6 @@ pre code {
    max-width: 60rem;
  }
 }
-@media (min-width: 75em) {
-  .container {
-    max-width: 72.25rem;
-  }
-}
 /* line 30, /Users/mdo/work/bootstrap/scss/grid */
 .container-fluid {
@@ -797,7 +797,7 @@ pre code {
 }
 /* line 11, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-right: .75rem; 
@@ -1064,7 +1064,7 @@ pre code {
  margin-left: 100%;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
@@ -1326,7 +1326,7 @@ pre code {
  }
 }
-@media (min-width: 62em) {
+@media (min-width: 48em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
@@ -1588,7 +1588,7 @@ pre code {
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
@@ -1850,6 +1850,268 @@ pre code {
  }
 }
+@media (min-width: 62em) {
+  /* line 27, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
+    float: left;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-1 {
+    width: 8.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-2 {
+    width: 16.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-3 {
+    width: 25%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-4 {
+    width: 33.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-5 {
+    width: 41.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-6 {
+    width: 50%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-7 {
+    width: 58.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-8 {
+    width: 66.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-9 {
+    width: 75%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-10 {
+    width: 83.333333%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-11 {
+    width: 91.666667%;
+  }
+  /* line 35, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-12 {
+    width: 100%;
+  }
+  /* line 55, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-0 {
+    right: auto;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-1 {
+    right: 8.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-2 {
+    right: 16.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-3 {
+    right: 25%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-4 {
+    right: 33.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-5 {
+    right: 41.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-6 {
+    right: 50%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-7 {
+    right: 58.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-8 {
+    right: 66.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-9 {
+    right: 75%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-10 {
+    right: 83.333333%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-11 {
+    right: 91.666667%;
+  }
+  /* line 50, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-pull-12 {
+    right: 100%;
+  }
+  /* line 45, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-0 {
+    left: auto;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-1 {
+    left: 8.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-2 {
+    left: 16.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-3 {
+    left: 25%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-4 {
+    left: 33.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-5 {
+    left: 41.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-6 {
+    left: 50%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-7 {
+    left: 58.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-8 {
+    left: 66.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-9 {
+    left: 75%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-10 {
+    left: 83.333333%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-11 {
+    left: 91.666667%;
+  }
+  /* line 40, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-push-12 {
+    left: 100%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-0 {
+    margin-left: 0;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-1 {
+    margin-left: 8.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-2 {
+    margin-left: 16.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-3 {
+    margin-left: 25%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-4 {
+    margin-left: 33.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-5 {
+    margin-left: 41.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-6 {
+    margin-left: 50%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-7 {
+    margin-left: 58.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-8 {
+    margin-left: 66.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-9 {
+    margin-left: 75%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-10 {
+    margin-left: 83.333333%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-11 {
+    margin-left: 91.666667%;
+  }
+  /* line 60, /Users/mdo/work/bootstrap/scss/mixins/grid-framework */
+  .col-xl-offset-12 {
+    margin-left: 100%;
+  }
+}
 /* line 5, /Users/mdo/work/bootstrap/scss/tables */
 table {
  background-color: transparent;
@@ -1988,7 +2250,7 @@ table td[class*="col-"], table th[class*="col-"] {
  min-height: .01%; 
  overflow-x: auto;
 }
-@media screen and (max-width: 47.9em) {
+@media screen and (max-width: 33.9em) {
  .table-responsive {
    width: 100%;
    margin-bottom: 1rem;
@@ -2516,7 +2778,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
  color: #747a7f;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 423, /Users/mdo/work/bootstrap/scss/forms */
  .form-inline .form-group, .navbar-form .form-group {
    display: inline-block;
@@ -2605,7 +2867,7 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
 .form-horizontal .form-group:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 523, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .control-label {
    padding-top: .6rem; 
@@ -2617,13 +2879,13 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
 .form-horizontal .has-feedback .form-control-feedback {
  right: .75rem;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 544, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .form-group-lg .control-label {
    padding-top: .75rem;
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 551, /Users/mdo/work/bootstrap/scss/forms */
  .form-horizontal .form-group-sm .control-label {
    padding-top: .4rem;
@@ -3593,7 +3855,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 .navbar:after {
  clear: both;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar {
    border-radius: .25rem;
  }
@@ -3604,7 +3866,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  z-index: 1000;
  border-width: 0 0 1px;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-static-top {
    border-radius: 0;
  }
@@ -3617,7 +3879,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  left: 0;
  z-index: 1030;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-fixed-top, .navbar-fixed-bottom {
    border-radius: 0;
  }
@@ -3681,7 +3943,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
@@ -3690,7 +3952,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
    margin-bottom: 0;
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-form {
    width: auto;
    padding-top: 0;
@@ -3718,7 +3980,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  border-bottom-left-radius: 0;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  .navbar-text {
    float: left;
    margin-right: 1rem; 
@@ -3726,7 +3988,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  }
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 268, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-right {
    margin-right: -1rem;
@@ -3795,7 +4057,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  color: #555; 
  background-color: #e7e7e7;
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  /* line 359, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
@@ -3913,7 +4175,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
  color: #fff; 
  background-color: #1f2021;
 }
-@media (max-width: 47em) {
+@media (max-width: 33em) {
  /* line 517, /Users/mdo/work/bootstrap/scss/navbar */
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #1f2021;
@@ -4457,7 +4719,7 @@ a.badge:hover, a.badge:focus {
  border-top-color: #d0d5d8;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 27, /Users/mdo/work/bootstrap/scss/jumbotron */
  .jumbotron {
    padding: 3.2rem 0;
@@ -5233,7 +5495,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  overflow: scroll;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 133, /Users/mdo/work/bootstrap/scss/modal */
  .modal-dialog {
    width: 600px;
@@ -5252,7 +5514,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  }
 }
-@media (min-width: 62em) {
+@media (min-width: 48em) {
  /* line 146, /Users/mdo/work/bootstrap/scss/modal */
  .modal-lg {
    width: 900px;
@@ -5731,7 +5993,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
  text-shadow: none;
 }
-@media (min-width: 48em) {
+@media (min-width: 34em) {
  /* line 226, /Users/mdo/work/bootstrap/scss/carousel */
  .carousel-control .icon-prev, .carousel-control .icon-next {
    width: 30px;
@@ -6009,93 +6271,93 @@ a.bg-danger:hover {
  display: none !important;
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-block {
    display: block !important;
  }
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-inline {
    display: inline !important;
  }
 }
-@media (max-width: 47.9em) {
+@media (max-width: 33.9em) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-block {
    display: block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-inline {
    display: inline !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-block {
    display: block !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-inline {
    display: inline !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-block {
    display: block !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-inline {
    display: inline !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
 }
-@media (min-width: 48em) and (max-width: 61.9em) {
+@media (min-width: 34em) and (max-width: 47.9em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-sm {
    display: none !important;
  }
 }
-@media (min-width: 62em) and (max-width: 74.9em) {
+@media (min-width: 48em) and (max-width: 61.9em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-md {
    display: none !important;
  }
 }
-@media (min-width: 75em) {
+@media (min-width: 62em) {
  /* line 17, /Users/mdo/work/bootstrap/scss/mixins/responsive-visibility */
  .hidden-lg {
    display: none !important;

--- a/docs/dist/css/bootstrap.css.map
+++ b/docs/dist/css/bootstrap.css.map
--- a/docs/dist/css/bootstrap.min.css
+++ b/docs/dist/css/bootstrap.min.css
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -28,6 +28,39 @@
        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
      </div>
+      <h3>Five grid tiers</h3>
+      <p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
+<div class="row">
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+  <div class="col-xs-4">.col-xs-4</div>
+</div>
+<div class="row">
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+  <div class="col-sm-4">.col-sm-4</div>
+</div>
+<div class="row">
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+  <div class="col-md-4">.col-md-4</div>
+</div>
+<div class="row">
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+  <div class="col-lg-4">.col-lg-4</div>
+</div>
+<div class="row">
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+  <div class="col-xl-4">.col-xl-4</div>
+</div>
      <h3>Three equal columns</h3>
      <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
      <div class="row">

--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -3,7 +3,12 @@ layout: page
 title: Grid system
 ---
-Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes [predefined classes](#grid-example-basic) for easy layout options, as well as powerful [mixins for generating more semantic layouts](#grid-semantic).
+Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
+### Quick start
+- Example grid class
+- Example mixins
 ### Introduction

--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -82,3 +82,12 @@
 @include media-lg {
  @include make-grid(lg);
 }
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@include media-lg {
+  @include make-grid(xl);
+}
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -272,16 +272,20 @@ $zindex-modal:             1040;
 //
 //## Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes.
-// Large screen / wide desktop
+// Extra large screen / wide desktop
-$screen-lg-min:              75em;
+$screen-xl-min:              75em;
-// Medium screen / desktop
+// Large screen / desktop
-$screen-md-min:              62em;
+$screen-lg-max:              ($screen-xl-min - .1);
+$screen-lg-min:              62em;
+// Medium screen / tablet
 $screen-md-max:              ($screen-lg-min - .1);
+$screen-md-min:              48em;
-// Small screen / tablet
+// Small screen / phone
-$screen-sm-min:              48em;
 $screen-sm-max:              ($screen-md-min - .1);
+$screen-sm-min:              34em;
 // Extra small screen / phone
 $screen-xs-max:              ($screen-sm-min - .1);
@@ -306,14 +310,17 @@ $grid-float-breakpoint-max:  ($grid-float-breakpoint - 1);
 //
 //## Define the maximum width of `.container` for different screen sizes.
+//** For `$screen-xs-min` and up.
+$container-sm:               34em; // 480
 //** For `$screen-sm-min` and up.
-$container-sm:               45rem; // 720
+$container-md:               45rem; // 720
 //** For `$screen-md-min` and up.
-$container-md:               60rem; // 960
+$container-lg:               60rem; // 960
 //** For `$screen-lg-min` and up.
-$container-lg:               72.25rem; // 1140
+$container-xl:               72.25rem; // 1140
 //== Navbar

--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -4,9 +4,9 @@
 // any value of `$grid-columns`.
 // [converter] This is defined recursively in LESS, but Sass supports real loops
-@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
-    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
  }
  #{$list} {
    position: relative;