Sidebar Order for Mobile Screens

This would require some major reworking of the current HTML structure.

By default, the content is displayed first, as it's regarded as the most important content for search engines, so it's displayed first.

The reworking of the HTML is a bit much to explain here, but there's another option.

You could GP Hooks to include a new widget area after the header.

Then, hide it on desktop, and show it on mobile:

.new-widget-area {
      display: none;
}

@media screen and (max-width: 768px) {
      .new-widget-area {
            display: block;
      }
}

You can learn how to create new widget areas with a quick Google search.

Make sure you execute PHP in the hook with the new widget area (will require some PHP).

Hope this helps :)

Thanks, I'll give that a try.
I have seen many requests for the same thing. It may be worth considering as an option for a future update?

Definitely something to look into :)

Hi tom,

I have a right sidebar on my homepage. Is it possible to hide a widget from this bar on mobile devices?

Thanks

Hi there,

Each widget has a unique ID - you can check it by right clicking the widget and inspecting element.

Look for the "aside" element, and you'll see an id. For example, the 30 day guarantee widget in the right is made up of this: <aside id="text-6" class="widget inner-padding widget_text">

I can now use that ID in CSS to do stuff to:

@media (max-width:768px) {
      #text-6 {
            display: none;
      }
}