Media Queries Incorrect 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. This stylesheet where the media queries are all min-width media queries as in Bootstrap but which do NOT follow the order of the Bootstrap queries (i.e. Bootstrap is smallest first).

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

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

Here we have the wrong order of media queries with the media query for the largest size appearing before a media query for a smaller size. The effect of this is as follows:

• Above a large size (>=992 pixels) both media queries apply so the large class (.col-lg-2) and its associated properties never takes effect because it is overridden by the .col-md-4 class. So at anything 992, or larger, each of the three divs will take up 1/3 of the screen and have a yellow background color.
• Between 768-992 pixels, only the md media query applies, so the elements will be three across with a yellow background color.
• Below 768 pixels, neither media query applies, and so the divs stack because they are block level elements and the divs have no background color.

Revised: April 10, 2018