Media Queries Correct Order

This example demonstrates the importance of the order of media queries within Bootstrap. To show this, we do not use the Bootstrap 4 stylesheet but instead a very simple stylesheet where the media queries are all min-width media queries as in Bootstrap and which follow the order of the Bootstrap queries (i.e. smallest first).

Each of the 3 divs below has the following classes applied to it: class="col-lg-2 col-md-4". The stylesheet is as follows:

@media (min-width: 768px) {
.col-md-4 {
width:33%;
float:left;
background-color:yellow}
@media (min-width: 992px) {
.col-lg-2 {
width:16%;
float:left;
background-color:pink}

This is the correct order of media queries, where the media query for a larger screen resolution will override the media query for a smaller screen resolution where the two conflict.

Note that whether a conflict occurs in this instance does not result from two alternative definitions of a given class. Here one class is defined in one media query, and the other class is defined in the other media query. The potential conflict arises from the fact that both classes set a value for the same CSS property, or in this case, three CSS properties: width, float, and background-color. So where both media queries apply, the CSS properties specified in the second one will override conflicting CSS properties in the first.

• At a large size (>=992 pixels), each of the three divs will each occupy one sixth of the screen width, have a pink background color, and be side by side because the second style specification is overriding the first.
• At a size between >=768px and <992px, the three divs will each occupy one third of the screen width, have a yellow background color, and be side by side because only the first style specification applies.
• At a size below 768px, neither of the classes will be defined, and so the three divs (because they are block level elements) will stack and occupy the entire screen width and will not have a background-color.

Revised: October 27, 2020