CSS Flexbox
No Ordering Applied
Re-Ordered
Re-Ordered Links
1
This appears first in source order. 2
This appears second in source order. 3
This appears third in source order. 4
This appears fourth in source order.
This appears first in source order. 2
This appears second in source order. 3
This appears third in source order. 4
This appears fourth in source order.
Re-Ordered div elements with tabindex = 0
1
This appears first in source order.
This appears first in source order.
2
This appears second in source order.
This appears second in source order.
3
This appears third in source order.
This appears third in source order.
4
This appears fourth in source order.
This appears fourth in source order.
This example is based on one originally used in the excellent post HTML Source Order vs CSS Display Order by Adrian Roselli.