Hello,

Perhaps I missed this in the queue somewhere but I can't for the life of me figure out how to get this to work in Bootstrap. I think this might be related to another issue, https://drupal.org/node/2122123, but I'm not sure.

What I am trying to do is to get the "primary" and/or "secondary" regions to stack BELOW the content region, when a site is viewed in mobile.
So essentially if you have regions like this on a desktop mode:

A | B | C

A= Primary
B = Content
C = Secondary

On the mobile view, what I want is to have it like this

B
A
C

I'm pretty sure that Bootstrap can do this, the problem I am having is getting the appropriate pull/push classes in to my layout. I'm building in SASS and tried doing some @extend inside of a media query but had no luck. I found this breakdown on Stack Overflow - https://stackoverflow.com/questions/18514922/reordering-divs-responsivel... but can't figure out how to do it in a Bootstrap subtheme.

Is this possible? Do I need to do this somehow with Javascript (like Omega 3.x used to) or can this be done on a CSS/page.tpl.php level?

Thanks in advance for any help!

Comments

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (fixed)

Basically you have to override your sub-theme's page.tpl.php file and re-order where the regions are rendered. Then it's just a matter of fiddling with CSS to get the right floats to work properly. The tricky part is that the col-* classes all have float: left, so the content region would always come first... even on desktop. If you could figure out a way to not float that region, it may work, but it's likely to be inconsistent for browser-compatibility. There's no "right" way to do it though, you may just be better off detecting media query changes in JS and repositioning DOM elements, probably the safest method IMO.