This page runs on Pavilion's left-sidebar layout: a four-column rail and an eight-column reading area on desktop, collapsing to a single stack on phones. Bootstrap's order utilities do the flip — order-md-1 pulls the rail ahead of the article once the grid reaches the md breakpoint, and order-1 pulls the article ahead of the rail below it, so a visitor on a phone always lands on the content first.

Reach for this arrangement when the rail is doing real navigation work — documentation with a section tree, a filtered project archive, a blog organized by category. A visitor arriving from search gets the article immediately; a visitor who's browsing gets the map in the same glance the rail provides on desktop.

The rail is furniture, not the room — it should orient people, never compete with the page they came to read.

Keep rail widgets short and scannable: a heading, a sentence of context, a tight list of links, one button. If a widget grows past that, it probably wants to be a page of its own. The two widgets on this page show the pattern at its natural size — swap their contents freely, the layout doesn't care what's inside.

Every layout in this set shares the same nav, feature-strip role, and footer, so arrangements can mix page-by-page without the site feeling stitched together. Compare this page with its mirror image and the double-rail version using the buttons in the rail.