Two Sidebar adds a second rail on the opposite side: 3 columns, then 6, then 3, for a symmetrical desktop reading page with wayfinding on both edges. Order utilities do three jobs here instead of one — the left rail carries order-md-1 to lead on desktop, the article carries order-md-2 to sit between the rails, and the right rail needs no md override at all because it's already last in the DOM.

On phones, none of the md overrides apply, so the base order values take over: the article (order-1) leads, the left rail (order-2) follows, and the right rail (order-3) comes last — the same left-to-right desktop reading sequence, just stacked instead of side by side.

Two rails earn their keep on reference material dense enough to need wayfinding from both directions — think documentation with a chapter tree on one side and a table of contents on the other.

Most sites never need this much rail. Reach for Two Sidebar only when a single rail genuinely can't hold everything a visitor needs to navigate the page — otherwise the two columns start competing with each other instead of the content between them.

The four widgets on this page are unchanged from Left and Right Sidebar's, just doubled up. Compare the single-rail versions with the buttons below, or drop both rails entirely on No Sidebar.