How to change order of three columns on Foundation with no issues

Question

I'm using Foundation 6 Framework and having some issues to change the order of three columns to looks like two on Desktop.

I have this layout on mobile breakpoint:
[ column 1 ]
[ column 2 ]
[ column 3 ]

and on Desktop looks like this:
[ column 2 ][ column 1 ]
[ column 2 ][ column 1 ]
[ column 2 ][ column 3 ]
- - - - - - - ->[ column 3 ]
Desktop Layout Image example

The page doesn't always has a big content on column number 2, sometimes it breaks:
Desktop Layout with The problem

Since I can't use Flex Box yet, at first I tried to use Source Ordering (pull and push), but it doesn't works well with stacked columns (like columns 2 and 3 in this case). This solution was applied using the class float-right of Foundation on column 1 (assuming that column 2 already has 'float: right' because of being the last column).

My code:

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

Does anyone know a good way to solve this problem? Thanks.

Answer 1

The situation has changed since this question was filed. Push/pull is on its way out. Now in Zurb Foundation 6+ the XY Grid and source ordering is the preferred solution and in Zurb 7 the old float grids are to be deprecated. See https://foundation.zurb.com/sites/docs/flexbox-utilities.html#source-ordering

The flexbox "order" css attribute can now be applied to individual items.

Or change the classes (eg "medium-order-1") as in the example:

<div class="grid-x grid-padding-x">
  <div class="cell small-6 small-order-2 medium-order-1">
    This column will come second on small, and first on medium and larger.
  </div>
  <div class="cell small-6 small-order-1 medium-order-2">
    This column will come first on small, and second on medium and larger.
  </div>
</div>

[I realize the question is in the context of being unable to use flexbox, but this is currently the correct answer for the largest audience]