• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

WP SITES

2467

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

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:

Click here to get full access to all tutorials

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

Grid Columns

Primary Sidebar

Recently Coded

  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background
  • Blog Page Template Showing Entry Title, Featured Image & Excerpt In Columns

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )