DOM Order and Visual Order Are Different Things

This article is first in the HTML — before the sidebar, not after it — on every one of Graphite's three layout pages. Screen readers and keyboard tab order always meet the content first, no matter which layout is showing. What changes page to page is only how CSS repaints that same markup on screen.

Here, the parent row carries .content-layout-left in addition to .content-layout. That modifier class sets order: 2 on .content-main and order: 1 on .content-sidebar, so flexbox draws the sidebar first, on the left, even though it's second in the HTML.

The Trick Only Runs on Desktop

Below the md breakpoint, a second rule forces .content-main back to order: 1 regardless of which layout class is on the row — so every one of these three pages stacks the same way on a phone: article, then sidebar, source order restored. The left/right distinction only exists once there's a horizontal row to reorder.

• One shared row class: .content-layout
• One modifier for this page: .content-layout-left
• Content is first in the HTML on all three layout pages
• Compare with right-sidebar.html, where no modifier is needed at all