Rearrange modules on mobile with Divi

With Divi 2.6, you can move important information around the page to suit the size of the viewer’s screen. Do you want a module to appear at one section of the screen on desktop and move to another position on mobile? Now you can do it without any CSS. Think of it like creating a responsive site on steroids, all by checking boxes within the Divi Builder.

For instance, in the GIF below, the About Our Company text is easily visible on the bottom of the page when using a computer. However, to make it display at the top of the page on a smaller screen size, you can use this workaround.

ezgif.com-optimize (1)

1. Start out by duplicating the section that you want to rearrange.

2. Then, move the duplicate module to the area you want it to appear on mobile, like so:

3 - How To-min

3. Now, edit the settings inside the first module to match the device on which it should appear. (This is a new feature in Divi 2.6 that you can find near the bottom of the general settings.) Just choose which devices you should hide the module on:

4 - How To 2-min

4. Finally, change the settings inside the second duplicated module to the opposite of your settings from Step 3.

Now you have two identical modules that appear in different places of the screen depending on the user’s device. This gives the appearance that one module is moving to different places of the screen!

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up