Change Order of Sidebar Widgets On Mobiles

This solution enables you to make the 2nd widget in your primary sidebar display 1st and the 1st widget, display 2nd on smaller screens.

In this example the primary sidebar is populated with the Genesis eNews widget 1st followed by the Simple Social Icons widget in 2nd position. On smaller screens, this order is changed so the social icons widget displays 1st and the eNews widget 2nd.

Here’s the demo video showing you how it works :

Demo Video

The video shows the 2nd widget displaying first and the first widget displaying second once the screen width reaches 1023px width.

Note : This solution also enables you to control the order of multiple widgets in any sidebar at any screen width.

Here’s the solution for registered users :

Related Tutorials

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.