How to change order of three columns on Foundation with no issues
<p>I'm using Foundation 6 Framework and having some issues to change the order of three columns to looks like two on Desktop.</p>

<p>I have this layout on mobile breakpoint:<br>
[ column 1 ]<br>
[ column 2 ]<br>
[ column 3 ]<br></p>

<p>and on Desktop looks like this:<br>
[ column 2 ][ column 1 ]<br>
[ column 2 ][ column 1 ]<br>
[ column 2 ][ column 3 ]<br>
 - - - - - - - ->[ column 3 ]<br>
<a href="http://i.stack.imgur.com/hmKrO.png" rel="nofollow">Desktop Layout Image example</a></p>

<p>The page doesn't always has a big content on column number 2, sometimes it breaks:<br>
<a href="http://i.stack.imgur.com/6mS3p.png" rel="nofollow">Desktop Layout with The problem</a></p>

<p>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).</p>

<p>My code:
</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="column small-12 large-4 float-right"&gt;column 1&lt;/div&gt;
  &lt;div class="column small-12 large-8"&gt;column 2&lt;/div&gt;
  &lt;div class="column small-12 large-4"&gt;column 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>



<p>Does anyone know a good way to solve this problem? Thanks.</p>