"Gotcha" Demonstration: Missing Base `flex`

This example highlights the common pitfall of forgetting the base `flex` class.

Incorrect: Missing Base `flex`

Item A (Incorrect)
Item B (Incorrect)

Observation: Notice how "Item A" and "Item B" above might not go side-by-side on 'sm' screens (or might behave unpredictably across browsers for flex properties) because the parent div lacks the base `flex` class. `sm:flex-row` alone is not enough.

Correct: With Base `flex`

Item 1 (Correct)
Item 2 (Correct)

Observation: "Item 1" and "Item 2" correctly stack on small screens and arrange horizontally on 'sm' screens and wider because the parent has `flex flex-col sm:flex-row`.

Resize your browser to see the difference. The "Incorrect" example fails to apply `sm:flex-row` effectively.