Content areas are added to a layout by using the .content class along with an additional priority class of either .content-primary or .content-secondary.

Note: Content areas only appear as columns on devices with a screen size of 768px or wider.

Devices with a screen size narrower than 768px will display each content areas stacked in the order defined by the HTML.

Related site content on the right

A basic responsive layout suitable for most topical articles can be achieved by incorporating <article> and <aside> elements into the document structure with the appropriate .content classes.

<main class="layout" role="main">
  <article class="content content-primary" role="article">
  ...
  </article>

  <aside class="content content-secondary">...</aside>
</main>

Site navigation content on the left

By reversing the order of the .content classed elements you can position navigational content to the left which will collapse to the top of the main article on a narrow screen device.

<main class="layout" role="main">
  <div class="content content-secondary">...</div>

  <article class="content content-primary" role="article">
  ...
  </article>
</main>

Responsive navigation below main content

By adding the .layout-first-right class to the .layout classed element and reversing the order of the .content classed elements you can reverse the way content areas collapse on a narrow screen device.

<main class="layout layout-first-right" role="main">
  <article class="content content-primary" role="article">
  ...
  </article>

  <div class="content content-secondary">
    <nav role="navigation">...</nav>
  </div>
</main>