I am trying to get this layout working both on mobile as desktop. It is possible by duplicating a column and using show-for-small/large, but I'd like to achieve it only with using push/pull states or anything similar (so no repeating markup).
Medium/Large:
+----------+----------+----------+----------+
| column-A | column-B | column-C | column-D |
+----------+----------+----------+----------+
| column-E |
+----------+----------+----------+----------+
Small:
+----------+----------+----------+----------+
| column-A |
+----------+----------+----------+----------+
| column-B |
+----------+----------+----------+----------+
| column-C |
+----------+----------+----------+----------+
| column-E |
+----------+----------+----------+----------+
| column-D |
+----------+----------+----------+----------+
This works for large, but obviously not for small. http://jsfiddle.net/2rmfas9r/
<div class="row">
<div class="columns small-12 large-3">A</div>
<div class="columns small-12 large-3">B</div>
<div class="columns small-12 large-3">C</div>
<div class="columns small-12 large-3">D</div>
<div class="columns small-12">E</div>
</div>
Is there an easy way, to achieve the desired layout?
With Foundation source ordering, there's no way to do that without repeating your markup. It works only for columns on the same row.
Generally speaking, you can't do that with css, because a column must occupy its space and you don't know how much it is long.
If your column-E has a fixed height, you can put that on position:absolute and bottom: 0, and add a padding-bottom to the .row, equal to the column-E's height.
if you can use Javascript, you can simply use Foundation.utils.is_medium_up() to check in wich viewport you are and then use jQuery .deatch() and .append() for column-E repositioning.