[Resolved] widget order for mobile screens

[alw]

Can I set the order of menu/content/widgets when the screen width is reduced, e.g. for mobile devices?

[Tom]

Hmm, not easily.

One way I can think of is to install a plugin that lets you add classes to your widgets.

Then add “desktop” and “mobile” classes to the widgets.

Then add some CSS so “mobile” widgets are hidden, and “desktop” widgets are shown.

Then some CSS with a media query to switch that so mobile widgets are shown and desktop widgets are hidden.

Something like this:

.desktop {display:block;}
.mobile {display: none;}

@media screen and (max-width: 767px) {
      .desktop {display: none;}
      .mobile {display: block;}
}

Then use a plugin like this to add the classes to the widgets: https://wordpress.org/plugins/widget-css-classes/

[Author]

Posts