Changing the Stacking Order of Sidebars in Responsive Mode

[JohnP]

Is there a way to change the stacking order of the primary and secondary sidebars when they move from their left and right positions to their stacked, above and below positions when the screen size is made smaller?

Just to clarify, in a sidebar-content-sidebar configuration, the sidebar on the right (the primary sidebar by default) gets stacked on top of the secondary sidebar (the one on the left). Is there a way to change this stacking order?

[David Chu]

Hi,
Interesting question. I wrote an article related to this. Its purpose was a trick for getting the Primary Sidebar above Content at responsive size. (even though I wouldn't always recommend that from a usability perspective - usually the Content should be king, so to speak!)
http://davidchu.net/blog/move-sidebar-content-website-wordpress-genesis/

Your question is complicated, because the Secondary sidebar is not in the same HTML container as Content and Primary. So no easy trick.

Adapting my code in the article, I moved the Secondary Sidebar above Content and then Primary, but I don't think that's exactly what you were looking for. And this code is for Genesis 2 - it could easily be adapted for Genesis 1.

media only screen and (max-width: 1023px) {
    .site-inner {display:table;}
    .site-inner .content-sidebar-wrap {display:table-footer-group; float: none;}
    .site-inner .sidebar-secondary {display:table-header-group; float: none;}
}

(I took off the at-sign before the media line above because bbPress barfs on that)

A bunch more coding and experimenation would possibly yield what you're describing. Might not be worth that much grief. One reason why I'm not always all that keen on 3 column designs. 🙂

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[JohnP]

Thank you, Dave - a thorough response! Your "might not be worth that much grief" sold me 🙂

[David Chu]

Sounds great, John.
It's an interesting topic to me, that's why I elaborated a lot.

The whole "table hack" thing is nice, because it's much easier to do than handling it all with custom PHP programming, or something radical like jQuery. In fact, it doesn't even harm SEO, as in the HTML, content is still first! 🙂 When I first used that hack, it was somebody sticking their sidebar ads above content - I suggested to them that it might be perceived as cheesy, but they were undeterred, as people often are.

And yes, sometimes jumping through 20 hoops to do something may not be the best course. 🙂

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts