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.

Revised: October 27, 2020

Window size:
1
2
3