css - Column Source Ordering [ Zurb Foundation 5 ] -

I am trying to make this layout work as both desktops on mobile. It is possible to duplicate a column and use it for show-to-small / large, but I want to get it only with using push / bridge states or something similar (like an repeated markup).

Medium / Large:

  + ---------- + ---------- + ------ ---- + --- ------- + | Column-A | Column-B Column-C | Column-D | + ---------- + ---------- + ---------- + ---------- + | Column-e + ---------- + ---------- + ---------- + ---------- +  < / Pre> 
 Small: 
 
  + ---------- + ---------- + --------- - + ---------- + | Column-A | + ---------- + ---------- + ---------- + ---------- + | Column-B + ---------- + ---------- + ---------- + ---------- + | Column-C | + ---------- + ---------- + ---------- + ---------- + | Column-e + ---------- + ---------- + ---------- + ---------- + | Column-D | + ---------- + ---------- + ---------- + ---------- +  < / Ex> 
 It works for large, but not clearly for small 
 
   
 
 Any easy way to get the desired layout? 
 

With the order of the Foundation Source, there is no way to do this without repeating your markup Works for columns on the same line.

Generally, you can not do this with CSS, because a column should occupy its place and you do not know how long it is.

If you have a certain height of column-E , you can assign it to position: full and below: 0 And add padding-bottom to .row , add the height of column-E .

If you can use Javascript, you can simply check the viewport that you have by using Foundation.utils.is_medium_up () and then the jQuery .deatch () and .append. () for column-E repositioning