Desktop-first with max-width
Level 2 of 10Your goal
Boxes A and B (200 × 80, 20px apart) sit side by side. When the viewport is 500px or narrower, stack them in a column. Expected: side by side on the 700px stage; on the 420px stage B sits 20px below A.
Must use
flex-directionChecked at 2 stage widths (420px, 700px) — every stage below has to match.
Elements
Hover one to find it on the stage. Click it, or put your cursor inside its CSS rule, to focus on just that element.
stage 420px
stage 700px
target content boxtarget outer edge (green = matched, red = not yet)your element (hovered or focused)
Feedback updates as you type, and your CSS is saved in this browser. Exact target numbers are in the Target panel.