Susy: different order of blocks for different breakpoints?

Question

I would like the header of my site to look like this:

[_1_] [____2____] [_3_]

On smaller screens, i would like it to adapt like this:

[____2____]
[_1_] [_3_]

That can easily be achieved with ZenGrids, but i fail to come up with a solution for Susy.

How can i achieve that using Susy's at-breakpoint?

Answer 1

This should be possible with source order 2-1-3, and then using push/pull to move columns into place. You can also use the columns(), gutter(), and space() functions to manipulate margins by hand - which would allow you to recreate the Zen approach fairly easily.