I managed to make some css to display the wpforo sidebar at the top of the page on mobile devices, I was wondering if anyone could help me develop it further such that I can pick specific widgets to display at the top, then choose which widgets go underneath the page content.
Would be really useful as I want the login widget in the sidebar to display above the page content, but I dont want to overcrowd the top of the page with the other widgets, so displaying them at the bottom would be good. At the moment I had to compromise and force the other widgets to go at the bottom by removing them from the sidebar and putting them underneath the forum content via a shortcode plugin.
Here is the css
@media (max-width: 768px) {
.wpforo-main.wpft-forum {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.wpforo-content {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
Here is the forum I did it on: http://examqa.com/forums/
@media (max-width: 768px) {
.wpforo-main.wpft-forum {
display: flex;
flex-flow: row wrap;
}
.wpforo-content {
order: 2;
}
}
This is the slimmed down version of the css
UPDATE:
Just found this thread: https://wpforo.com/community/general-discussions/css-to-make-sidebar-show-on-top-of-content-for-mobile/#post-23237
Not sure how to implement it on my forum.
I need ONLY the login widget to be at the top