Sidebar Before Content On Smaller Screens

By default, Genesis and most WordPress themes display the sidebar below the content when you reduce the screen size.

What the code in this tutorial provides is a solution to display your main sidebar above the content when your screen is reduced to a specific width.

If you want to move your sidebar above the content on mobiles, watch the video to see how it works.

Here’s the demo video:

You can also use the 2nd & 3rd solutions to display your sidebar in any position on the page when the screen size reduces.

The 3rd solution also enables you to control the order of different elements at any screen width.

Here’s the code for 3 different solutions for logged in members:

Related Solutions

• Reorder Widget Areas on Mobile
• Custom Genesis Layout Setting Using CSS Grid
• Change Order of Sidebar Widgets On Mobiles
• Show 1st Widget In Sidebar Before Content On Mobile