Inspect the working example
At widths below 600px, the instructions and result stack vertically. At 600px and above they occupy two columns. The DOM order stays Instructions then Result throughout.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| 320/390px | Compare section top positions | Instructions above Result |
| 960px | Compare section left positions | Instructions left, Result right |
| DOM order | Read heading sequence | Instructions, Result at every width |
Follow the browser mechanism
Responsive placement can change columns without changing source order. The media rule here controls only the number of tracks. It does not use order, dense placement or a reversed axis. This is distinct from choosing a detail-link hit area or applying a component-local query.
Visual reordering can disagree with source order
The alternative uses order to put Result first visually while retaining Instructions first in the DOM.
<style>body{margin:8px}</style>
<style>.lesson{display:grid}.result{order:-1}</style><section class="lesson"><section><h2>Instructions</h2></section><section class="result"><h2>Result</h2></section></section>Result appears above Instructions, but the heading DOM sequence is still Instructions, Result.
Try the repair
If instructions must be first for this task, can order:-1 on Result repair the source sequence?
Show the worked answer
No. It changes visual order only. Keep the intended source sequence and choose a layout that respects it.
- Compare DOM sequence and measured positions at all three widths.
- Do not infer reading order from a single wide screenshot.