This tutorial explains how to reverse the vertical order of columns in mobile.
Setting up a column inversion
When you create a standard template, the image on the left will always be displayed below the image on the right - this is the classic responsive behavior. Here we're going to explain how to change this display order on mobile.
1. Desktop view
Drag & drop 2 wrapper into 1 section.
Enter a 50% width for the first wrapper, and align the element to the right. This is important to ensure that the process works properly.
Then, enter a 46% width for the second wrapper, and align the element to the left.
You absolutely need to have 4% of difference between your two wrapper – If you don’t have a total of 96% it won’t works on Outlook.
2. Mobile view
The configuration of the two groups is inherited in mobile view. Here, the first group on the right displays a width at 50% of the mobile view.
And the second group on the left displays a width at 46% of the mobile view.
To configure column inversion correctly, simply set the width of each group to 100%.
The image on the right will then be displayed above the image on the left.
You can use column inversion to reverse the order of the images. But you can also insert any kind of content into these groups.
To find out more about reversing columns, check out our dedicated live video, Reversing the order of columns on a mobile.