For years, the order in which an HTML document was written directly impacted how it was displayed. Want navigation on the top or left? It had to come before content in HTML. That was an uncomfortable — but necessary — restriction in the past. But with the rise of mobile devices, and some new CSS techniques, designers need greater finesse over their work than restricting “top-left” to always meaning “first.”

Luckily, the future looks bright for layout options. Among others, our responsive framework comes with the ability to arrange columns regardless of how they’re set in HTML. Here’s how you can rearrange elements in a row with Foundation.

1. Start with a row

In this example, we’ll start with blocks “A”, “B” and “C” in order. This puts the most important information higher in the HTML, and left on the page.

<div class="row">
  <div class="large-6 columns" id="A">…</div>
  <div class="large-4 columns" id="B">…</div>
  <div class="large-2 columns" id="C">…</div>
</div>

(Notice that the large-# columns adds up to 12).

2. Shuffle the deck

But that’s restrictive. Let’s say we want the main content on the right.

<div class="row">
  <div class="large-6 columns push-6" id="A">…</div>
  <div class="large-4 columns" id="B">…</div>
  <div class="large-2 columns" id="C">…</div>
</div>

The class .push-6 moves A six columns to the left.

Obviously, pushing one wide column to the left obscures the two thin ones.

<div class="row">
  <div class="large-6 columns push-6" id="A">…</div>
  <div class="large-4 columns pull-6" id="B">…</div>
  <div class="large-2 columns pull-6" id="C">…</div>
</div>

The .pull-# classes to the opposite of .push-# — moving blocks to the left. Here we pull the two narrow columns to the left.

3. Breaking rules offers possibilities, but be careful

As we saw earlier, it’s possible to overlap columns. Thinking further, it’s even possible to push/pull columns out of rows altogether. That’s where math comes in to play:

• Make sure you never have more than twelve columns per row. For example, this illustration uses blocks that measure six, four and two columns apiece — a total of twelve.
• Try to not push or pull columns out of their row. For example, <div class="large-12 push-12">…</div> could push an entire block outside of a browser’s viewing area.

Creative designers may find an occasion to push/pull columns outside of their row, but in general we recommend using source order a tool separate content from presentation.

---