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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • 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:

Register for full access

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

CSS Grid Columns

Reader Interactions

Comments

  1. Joe Wiseman says

    November 21, 2019 at 4:54 am

    The page is located at https://loveworks.com

    Is it possible to contact me by email? I submitted my email with the account data.

    Thank you

    Log in to Reply
  2. Joe Wiseman says

    November 20, 2019 at 7:04 am

    HI,
    I use LeeWay Pro by ThemeZee.

    Because of the use of a sidebar menu, I want the sidebar to load before the content section.

    I have tried all of the code on this page but was not successful.

    Do you write custom code for themes other than Genesis or themes that you have not worked with before?

    Thank you
    Joe

    Log in to Reply
    • Brad Dalton says

      November 20, 2019 at 7:09 am

      Hi Joe. Please link to the live page in question.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags