A media query adds no specificity. A rule inside @media (min-width: 768px) and the same selector outside it carry exactly the same weight, so the winner is whichever the parser read last. Two min-width blocks written in the wrong order therefore produce a breakpoint that appears not to apply at all.
/* wrong: the 768 block is read last, so it wins at 1200 too */
@media (min-width: 1200px) { .sidebar { width: 320px; } }
@media (min-width: 768px) { .sidebar { width: 240px; } }
/* right: min-width ascending, max-width descending */
@media (min-width: 768px) { .sidebar { width: 240px; } }
@media (min-width: 1200px) { .sidebar { width: 320px; } }Both queries match at 1200px wide — that is what min-width means — so source order is the tie-break, and a mobile-first stylesheet has to run ascending for the whole file. Descending is equally valid provided it is max-width throughout. What breaks is mixing the two, because then no single ordering is correct and every overlap has to be closed by hand with (min-width: 768px) and (max-width: 1199px). The other half of the rule is that specificity still applies inside a query: #sidebar in the base stylesheet beats .sidebar in a media block whatever the order, which is the version of this bug that presents as the media query being ignored entirely.