In which ordering to use Twitter Bootstrap Breakpoints?

Question

Must the Twitter Bootstrap breakpoints for media queries be used top down or bottom up and when to define max-width definitions - before or after the min-width definitions? I seem to not get the answer from the tb-stylesheet. When using these breakpoints with my own stylesheets it appears the ordering matters because i encouter definition extinctions or ignorance.

I required to take care for device withs < 768 (which is the last breakpoint for *-xs definitions). I must take care for withs 320px, 480px and 600px and am trying to construct a reliable processing order. These are my current definitions which appear to override each other at some point.

/* lg and up */
@media (min-width: 1200px)
/* md only */
@media (min-width: 992px) and (max-width: 1199px)
/* md and up */
@media (min-width: 992px)
/* sm only */
@media (min-width: 768px) and (max-width:  991px)
/* sm and up */
@media screen and (min-width: 768px)
/* xs only */
@media (min-width: 767px)
@media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
@media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
@media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
@media screen and (min-width: 320px)
@media screen and (max-width: 320px)
/* e.g. Blackberry */
@media screen and (max-width: 349px)
@media screen and (max-width: 479px)
@media screen and (max-width: 567px)
@media screen and (max-width: 991px)

Somebody can clarify the correct order to prevent definition extinction?

Answer 1

CSS cascade rules apply to media queries so, if you want to override a rule with a media query, you need to make sure that the media query contains a rule with the identical selectors (or selectors with more specificity) and that it is loaded after the rule you want to override.

Same applies when you have multiple media queries. The cascade order along with rules for specificity and inheritance will dictate whether the media query is applied. Take for example:

body {
    background-color: teal;
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}
@media (min-width: 400px) {
    body {
        background-color: yellowgreen;
    }
}

Each of the selectors above are identical so they have the same specificity, but because of the cascade order, the background will never be the tomato color. If the body is 600 or more pixel wide, the rule for making the background tomato will be overridden by the last rule which also applies because 600px is also wider than 400px.

If you reorder the rules as follows:

body {
    background-color: teal;
}
@media (min-width: 400px) {
    body {
        background-color: yellowgreen;
    }
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}

Now, the body background will be teal, when the body is less than 400px wide. It will be yellowgreen when the body is 400px - 599px and it will be tomato, when the background is 600px wide or greater.

Of course, you can use max-width too. For example, if you had the following order, the limit on the width at 599px for the yellowgreen rule would ensure that that rule didn't apply once the body was 600px or more:

body {
    background-color: teal;
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}
@media (min-width: 400px) and (max-width: 599px) {
    body {
        background-color: yellowgreen;
    }
}

So, for the TL;DR version, think mobile first. Organize your stylesheets with your base styles define for your smallest devices. Then order your media queries from the next smallest device sizes and up such that the largest devices you want to support are last.

And, don't forget to make sure that the rules in your media queries use selectors are identical to or have more specificity than the rule you want to override.