If you use the Beaver Builder Theme and enable the Primary Sidebar on the left or right in your blog posts or on static pages, the mobile view changes as follows:
- Sidebar on the left: in mobile view, sidebar is displayed above content.
- Sidebar on the right: in mobile view, content is displayed above sidebar.
If you want your left sidebar to display below the content in mobile view, use the following CSS snippet. It sets up a CSS flexbox and assigns the page content a higher ordinal number than the sidebar so the content will appear first.
max-width setting in the first line is 767px, which reflects the default Beaver Builder breakpoint of 768 px for small devices. If you have set a custom breakpoint, the
max-width value must be changed to reflect that.
See the article on where to put CSS code.