How to reorder columns in Foundation 5 on mobile

Question

This is the layout I am trying to achieve using the Zurb Foundation 5 framework.

The code I have works on mobile, not desktop:

<div class="row">
    <div class="small-12 large-4 columns">1</div>
    <div class="small-12 large-8 columns">2</div>
    <div class="small-12 large-4 columns">3</div>
</div>

Ideally I would like to keep the logical order of the HTML. I've tried various push/pull combinations but I can't seem to get it to work.

I can get blocks 1 and 3 to stacks on the right using this solution ( Zurb Foundation 5: Grid Column Stacking ), but not on the left.

Any help would be appreciated.

Answer 1

The only way that I can think of for a layout to work like that is to add some custom javascript that moves the columns around. This is because you need to make another row inside of the existing ones so that the columns stack on large, and I don't know of any way to push/pull columns to go outside of their row. Something like this will work:

HTML

<div id="main" class="row">
  <div class="small-12 large-4 columns">
    <div class="row">
      <div id="one" class="small-12 columns">
        <p>1</p>
      </div>
      <div id="three" class="small-12 columns">
        <p>3</p>
      </div>
    </div>
  </div>
  <div id="two" class="small-12 large-8 columns">
    <p>2</p>    
  </div>
</div>

JavaScript

$(document).foundation();

$main = $('#main');
$one = $('#one');
$two = $('#two');

function moveAround() {
  if (Foundation.utils.is_small_only() || Foundation.utils.is_medium_only()) {
    $two.insertAfter($one);
  }

  if (Foundation.utils.is_large_up()) {
    $main.append($two);
  }
}

$(document).ready(function() {
  moveAround();
});

$(window).resize(function() {
  moveAround();
});