title: How to change order of three columns on Foundation with no issues
body: <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>