Flex: Responsive Sidebar

Sidebar that stays to the left on wide screens and stacks above the main content on small screens using flex-direction change.

Main content

This area grows while the sidebar keeps its width on large viewports. Resize the window to see the sidebar stack above.