The Layout That Needs No Trick

This row carries just .content-layout — not .content-layout-left. Neither .content-main nor .content-sidebar gets an order override, so flexbox falls back to source order: the article, which is first in the HTML, simply renders first, on the left. The sidebar, second in the HTML, lands on the right.

Compare that with left-sidebar.html, which reorders the exact same column structure with one modifier class. Here there's nothing to reorder — DOM order and visual order already agree, which is also why this is the layout most blogs and documentation sites default to.

Same Mobile Behavior, Simpler Desktop Rule

Below md both layout pages stack identically: article, then sidebar. The difference only shows up at desktop widths, and only in how many CSS rules it took to get there — one modifier class for the left-rail version, zero for this one.

• Row class: .content-layout, no modifier
• No order overrides on either column
• Content is still first in the HTML, same as every layout page
• Compare with left-sidebar.html for the version that needs the modifier