Archived topic
How to change order of sidebars for mobile?
5 replies · Started by Andrew on July 19, 2021
I have a GP site with two sidebars.
The content of the sidebars is nonstandard. It is inserted into each sidebar via elements using the hooks "generate_before_left_sidebar_content" and "generate_before_right_sidebar_content". There is no content in the sidebars except for what is inserted using these hooks.
By default, on mobile, the left sidebar appears directly below the main content, and the right sidebar appears below the left sidebar. I would like to reverse the order on mobile, so that the right sidebar appears above the left sidebar. How can I do this?
I looked at the sidebar layout article in the documentation, but it did not say anything about how the order of sidebars is determined on mobile.
Thank you!
P.S. The reason for this is that the right sidebar is more valuable on desktop, so that's where I want the high-value content. But the upper position is more valuable on mobile.
Hi Andrew,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Done. Thank you!
Give this CSS a try :)
@media (max-width: 768px) {
#content {
display: flex;
flex-direction: column;
}
#primary {
order: 1;
}
#right-sidebar {
order: 2;
}
#left-sidebar {
order: 3;
}
}Bingo! Thank you very much.
You are welcome :)
