I have a CSS grid created with Susy, with two asides and a content section, like this:
|1| |2| |content|
|content|
|content|
The source order is content-1-2, but the above is easy enough using push()
and pull()
.
On a narrower screen, I want the asides to be above each other, like this:
|1| |content|
|2| |content|
|content|
I am able to pull them into the same column, but they will simply overlap. How can I make this work?
I wouldn't use push/pull to achieve your basic arrangement. Instead, simply set your content as "omega" and it will float right, leaving space for asides 1 and 2 to stack or float next to each other automatically. Whenever you can, keeping objects in the natural "flow" is a really good idea, and in this case it solves your problem. :)