Adapting to screen sizes

You pick up a page whose mobile display is broken. The code looks explicit enough: <div class="lg:flex md:flex-col sm:hidden">. You shrink the window and the behavior makes no sense: the element disappears on tablet, reappears on phones, and the switch to a column layout never happens. You add an sm:block, which fixes one case and breaks two others. An hour later you have seven stacked prefixes and you're testing at random.

All of the confusion comes from a misunderstanding about one word. md: doesn't mean "on a medium screen"; it means "at 768 pixels and above." These are minimum width thresholds, not ranges. So sm:hidden doesn't hide the element on small screens: it hides it from 640 pixels up, meaning on every screen except the small ones. Once you've absorbed that, writing the classes becomes mechanical and you never stack seven prefixes again.

The thresholds and what they mean