Responsive Stacking: The "Gotcha"

This example illustrates a common pitfall: forgetting the base flex class.

Incorrect Example (Gotcha!)

The parent div below only has sm:flex-row . It's missing the base flex class. As a result, it's not a flex container, and sm:flex-row will have no effect. The items will stack vertically on all screen sizes because div elements are block-level by default.

Item A (Incorrect)
Item B (Incorrect)

Observation: Items A and B will *always* stack vertically, even on larger screens, because the parent is not a flex container.

Correct Example

The parent div below correctly uses flex flex-col sm:flex-row . It becomes a flex container, stacks vertically by default (mobile-first), and then switches to a row layout on sm screens and wider.

Item X (Correct)
Item Y (Correct)

Observation: Items X and Y will stack on small screens and be side-by-side on larger screens. This is because flex makes it a flex container, flex-col sets the initial stacking, and sm:flex-row correctly changes the direction at the breakpoint.

Key Takeaway (Gotcha):

The responsive prefix classes like sm:flex-row , md:grid-cols-3 , etc., only modify existing properties . For sm:flex-row to change the flex direction, the element must first be established as a flex container using the base flex class. Without flex , Tailwind doesn't know it should apply flexbox behaviors.