Showing content area above sidebars on mobile devices with CSS
-
Topic
-
If you have your site setup to have a sidebar on the left side (which most people generally don’t), you’ll notice that when you site scales down to mobile the left sidebar sits above the main content area.
The following CSS snippet is an approach you can take to ensure that the content area always sits on top of the sidebars when the site scale down to the mobile viewport.
@media (max-width: 767px) { #sidebar_layout .row-fluid { display: box; display: -moz-box; display: -webkit-box; box-orient: vertical; -moz-box-orient: vertical; -webkit-box-orient: vertical; } #sidebar_layout #content { box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; } #sidebar_layout .fixed-sidebar { box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } }
Note: We’re targeting 767px because that is when Bootstrap clears the floated columns and begins to stack.
This should work on iOS and Android, but will not work on Windows devices.
I’m not expert on Flexbox in CSS. If anyone has a better way to do this or a way to accomplish this for Windows devices, pelase share!
- You must be logged in to reply to this topic.