Foundation5 source ordering : content vs. sidebar

Question

I have a laid out structure with three columns in ZURB Foundation 5, two of which are sidebars (left & right) and the middle one is the main content area.

I've been playing around with the documentation's source ordering instructions but had some troubles.

I tried to visualise the situation so that you can understand what I want in a second.

This is the desktop view and the structure :

and this is how I want it to look like on mobile :

Does anyone know how am I gonna achieve that? Thanks in advance.

Answer 1

It would be

<div class="row">
  <div class="small-12 medium-6 medium-push-3 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-6 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

The first answer needs to use medium-push-3 instead of medium-push-6 and medium-pull-6 instead of medium-pull-3.

Answer 2

You can use Foundation's source ordering to alter the order at different breakpoints.

Your HTML would look something like this:

<div class="row">
  <div class="small-12 medium-6 medium-push-6 columns">Main</div>
  <div class="small-12 medium-3 medium-pull-3 columns">Left Sidebar</div>
  <div class="small-12 medium-3 columns">Right Sidebar</div>
</div>

Here's the demo.