One
A card in the switcher.
.bf-flow — rhythm that breathes
A vertical stack whose gap tightens as the container narrows (and opens up when wide), via container units. No media query.
A plain paragraph of body text. The vertical rhythm between these blocks is set by the container, not the screen — widen the box and the gap opens up.
Another block. In a narrow sidebar the same markup reads tight; in a wide column it breathes.
And a third, to make the rhythm obvious as you drag.
.bf-switcher — side-by-side ↔ stacked
Children share a row while the container is wide; each drops to its own full-width row when it gets narrow. The switch happens at the container, not the viewport.
Two
Another card.
Three
A third card.
form[data-form="adaptive"] — one-column reflow
The same form collapses its row to one column when the container narrows. The error summary stays hidden until a field is user-invalid — pure CSS.
.bf-sidebar — split ↔ stack
The aside sits beside the main content while the container is wide, then drops below it when the container narrows past the breakpoint (40rem).
Everything at once — the layout is the breakpoint
A sidebar whose main column is a switcher, holding an adaptive table and an adaptive card. Shrink the box and the sidebar stacks, the switcher stacks, and the table card-stacks — all from one resize.