This example demonstrates how items stack vertically on small screens and arrange horizontally on larger screens (
sm
breakpoint and up).
The container
<div>
above uses the classes
flex flex-col sm:flex-row
.
flex
: Establishes the div as a flex container.
flex-col
: Sets the default flex direction to column, so items stack vertically. This is our mobile-first approach.
sm:flex-row
: At the
sm
breakpoint (typically 640px) and wider, this class overrides
flex-col
and sets the flex direction to row, making items appear side-by-side.
Resize your browser window to see the layout change.