先看這個例子
少於 600px 時，指示和結果上下排列；600px 或以上轉成兩欄。DOM 次序一直是指示先、結果後。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 320／390px | 比較小節頂部位置 | 操作指示在結果上方 |
| 960px | 比較小節左邊位置 | 操作指示在左，結果在右 |
| DOM 次序 | 讀標題排列 | 每個闊度都是操作指示、結果 |
瀏覽器怎樣處理
轉版可改欄數，不必改原始排列。本例 media 規則只控制欄數，沒有用 order、密集補位或反轉方向。這與選詳情連結範圍、或依元件容器轉版，是不同工作。
只改畫面排列，可能與原始次序不符
反例用 order 把結果放到畫面前面，DOM 卻仍以指示為先。
<style>body{margin:8px}</style>
<style>.lesson{display:grid}.result{order:-1}</style><section class="lesson"><section><h2>操作指示</h2></section><section class="result"><h2>結果</h2></section></section>畫面結果在指示之上，DOM 標題次序卻仍是指示、結果。
試着修正
本項工作要求先讀指示，在結果加 order:-1 能否修正原始次序？
查看參考答案
不能，只改了畫面排列。應保留所需原始次序，再選相符版面。
- 三個闊度都比較 DOM 次序與實際位置。
- 不能只靠一張桌面截圖推定閱讀次序。