Sample content photo

A Four-Column Rail, an Eight-Column Read

This page is built on Apex's two-column grid: a four-column rail (col-md-4) and an eight-column reading area (col-md-8) on desktop, collapsing to a single stack on phones. The rail carries order-2 order-md-1; the content carries order-1 order-md-2 — so mobile visitors always land on the article first, and desktop visitors see the rail lead on the left where they expect it.

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

Two Widgets, Two Calls to Action

The rail on this page holds two .sidebar-block widgets separated by an <hr> — one text block, one image block, each with its own ghost button pointing at a related layout. Compare this page with its mirror image using the buttons in the rail.

  • col-md-4 / col-md-8 — the split itself
  • order-2 order-md-1 — on the rail column
  • order-1 order-md-2 — on the content column
  • row g-4 — the gutter between rail and content
  • Two .sidebar-blocks, one <hr> divider
All Templates