Change stacking order of column for mobile only

I need to change the stacking order of the three columns on the homepage of my website.
On a desktop browser, they appear side-by-side like this:

Overview | Upcoming Events | Videos

On a mobile device, they stack like this:

-Upcoming Events (main page content)
-Overview (left sidebar)
-Videos (right sidebar)

But he client is requesting that the Overview column appear on top, like this:

-Upcoming Events

I don’t want to change the actual HTML though. I’m already using media queries to change the header for mobile, but can’t figure out how to change stacking order with floats. Any ideas on how to do this?

Here’s the link:

FYI, I’m using a Wordpress YooTheme called Avenue.



You won’t be able to do it I’m afraid (unless you use flexbox). That page has the middle column first in source and has been designed that way (for seo I guess). If your overview is the important content then that should have been first in source and simply floated left as required. At the moment the columns are shifted with relative positioning which you can do for horizontal alignment but not for vertical.

You can’t move floats around vertically but flexbox does allow this if you only want to support very modern browsers but in all likelihood it may require some html changes to achieve.

Although floats are versatile not all things are possible with floats I’m afraid :slight_smile:

Support for that is getting pretty good now:

I guess, at a pinch, you could absolutely position the overview at the top on mobiles, but it’s a dangerous approach—as you don’t know how tall it needs to be. One option would be to hide the overview on mobile and replace it with an image. Again, pretty dirty, though. As Paul says, this is what flexbox is for.

If you think about it from a content point of view, an overview belongs before the other content, so I’d vote for changing the HTML.

Thanks guys, I had a feeling it wasn’t going to be an easy fix. I was trying to avoid editing the Wordpress php templates; they’re a bit convoluted and I don’t want to screw up other pages or the layout on non-mobile devices. I’ll check out Flexbox though.