Linearize Demo
This page uses CSS Grid and Floats to create a visual layout that contradicts the logical DOM reading order. Use the "Linearize" tool to strip the layout and reveal the true reading order.
Grid Layout (Visual order: 3, 2, 1)
DOM Item 1
Visually placed 3rd.
Visually placed 3rd.
DOM Item 2
Visually placed 2nd.
Visually placed 2nd.
DOM Item 3
Visually placed 1st.
Visually placed 1st.
Float Layout
DOM Item A
Floated to the right.
Floated to the right.
DOM Item B
Floated to the left.
Floated to the left.
DOM Item C (Paragraph following floats).