A typical two-column layout on a desktop might have the image on the right and the content on the left. However, the order might be better reversed for mobile devices, so the content appears above the image. Reversing the column order can make the website easier to navigate on mobile devices. By placing the content first, users can quickly see what the website is about and decide whether or not to continue scrolling to view additional content. This can help to reduce bounce rates and improve user engagement, as users are more likely to stay on the website if they can easily find what they are looking for.
A reversed column on the mobile device is even more important if you have the content in an alternate manner. For instance, a layout with image → content then content → image and no apparent separator between rows like follows.
On mobile devices, you’ll most likely end up with a layout similar to follows, which is bad for user experience.
In Divi, you can’t have reversed column layout for different devices by default. However, with this tutorial, we will show you how to reverse the desired column on the mobile device.
Reverse Column on Mobile Device
Step 1: Add a Custom CSS to your Desired Column
Firstly, edit your page with Divi Builder then open up the Row Settings of your desired row.
Continue by navigating to the Advanced tab → CSS ID & Classes block, and add reverse
to the CSS Class field.
Step 2: Add a Custom CSS Snippet
The next step is to add a custom CSS to reverse the column with the CSS class you’ve added before. Now, from your WordPress dashboard, navigate to Divi → Theme Options → General tab and then copy the following CSS snippet to the Custom CSS editor.
@media screen and (max-width: 980px){ .reverse{ display:flex; flex-direction: column-reverse; } }
The above snippet will reverse the column with reverse
CSS class on the device with maximum 980px display width.
Once you’ve added the snippet, save the changes by clicking on the Save Changes button.
Now, you’ll find the desired column is reversed and well-positioned for the layout on mobile devices.
The Bottom Line
Reversing the column order can make the website easier to navigate on mobile devices and even more so to an alternate image-content layout. This is because mobile devices typically have narrower screens, and you’ll end up with an awkward layout. And to fix that, you may want to reverse the column. This tutorial shows you how to reverse columns on a mobile device view using a CSS snippet. To streamline your workflow, you can save the snippet to Divi Cloud so that you can access it from all websites you build with Divi.