How to swap sidebar in Skeleton CSS Grid on small screens?

Question

I am new to using Skeleton CSS grids, so please excuse my ignorance!

My problem seems a simple one at first, but it's had me a bit stumped.

Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:

An example of a layout with a left sidebar and a right content area

On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.

The default behaviour of Skeleton is to stack this sidebar on top of the main area.

Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?

Thanks, Michael.

Try to use css3 media queries... you can acheive that through css3 media queries for small screens. — Gopikrishna, Feb 08 '13 at 13:06
@Gopikrishna Yes, I was planning to do so, but I am wondering how to do this without potentiall breaking skeletons flow. — Michael Giovanni Pumo, Feb 08 '13 at 13:09
if you use media queries that skeletion will not break to your normal desktop thing what ever you write inside media queries that will effect in to small screens only.. — Gopikrishna, Feb 08 '13 at 13:15
@Gopikrishna But how? This is exactly my issue at hand. Thanks! — Michael Giovanni Pumo, Feb 08 '13 at 16:24
please try to post your site url... i will try to help you... — Gopikrishna, Feb 11 '13 at 04:55

How to swap sidebar in Skeleton CSS Grid on small screens?

0 Answers0