Zurb foundation switch order of columns

[toolman]

Hi there,

I have the following code which currently displays a left column, a full width columns underneath and then a right hand columns.

<div class="row">
  <div class="column">
    <div class="columns large-8 no-padding feature-cover-wrapper" data-interchange="[img/small.png, (default)], [img/medium.png, (medium)], [img/large.png, (large)]" > LEFT COLUMN </div>
    <div class="row ">
      <div class="columns small-12 medium-12 large-12 intro"> FULL WIDTH COLUMN </div>
      <div class="columns large-4 test2 no-padding"> RIGHT COLUMN </div>
    </div>
  </div>
</div>

What I am trying to do for desktop is to display the left column on the left, the right column on the right and the full width column under the left and right. Then on tablet and mobile have the left column full width followed by the full width column and then the right column full width.

How can I do this?

Thanks.

[SamA74]

To switch order like that you will need to use flex box and its order property.
Though I think the structure may need to change.

[toolman]

Thanks, but I’m using Foundation’s classes only

[SamA74]

@toolman

Thanks, but I’m using Foundation’s classes only

I don’t know Foundation. Flex box is the only css way to alter order, without scripting. Though there may be a possible hack with floats

[ronpat]

<off topic>

Thought @SamA74 might enjoy this
http://www.pmob.co.uk/temp/re-organise2.htm

</off topic>

[SamA74]

I suppose that’s a hack with floats, the script just alters the class, right?
I was just trying a Pen with the html above, but I don’t think it will work with that structure.

[SamA74]

This does it with flex box:-

This one is old-skool floats, without any new-fangled flex box:-

They seem to behave the same, but that may alter with “real” content.
But this may not help the OP as it requires to change the html structure and may not fit in with the framework which makes RWD so simple and easy.

[toolman]

Many thanks, those examples worked