Plone 5 -Changing portlet behavior – responsive

Plone Support Theming
1

Sorry if this has been covered before, I’ve searched here and on the nets and can’t find a definitive answer. I’m new to theming Plone, and the current theme I’m working on is based off of Barceloneta.

When the screen gets below 768px, the left portlet collapses (as expected), but in my case it is forcing my main content down (which is no Bueno). How should I go about adjusting the theme so at a certain breakpoint the portlets collapse beneath the main content area as opposed to on-top of it?

Any suggestions are most welcome, and if I’m not coming across clear please let me know.

Thanks!

2

This goes as "any suggestion'.....

CSS flexbox and grid could be an option, as it is possible to set "order"

maybe something like this:

@media (max-width: 768px) {
.#main-container {
display: flex;
}

.leftsomeething { order: 2; width: 100%}
.mainsomething { order: 1; width: 100% }
.rightsomething{ order: 3; width: 100%}
}

PS: Note that you will have to add the 'something' classes to your theme (or you can use the col-xs-.... if you 'add all possible class names"

3

Espen,

Thanks for getting back to me. I tried going about it the flexbox way, but it didn't seem to like the "order" structure.

So looks like I'm back to the drawing board. Again, thanks for taking a shot at it!