Learn how to control how your email columns display on mobile devices using the Email Love Figma Plugin.
Default Behavior
By default, columns in your email automatically stack into a single column when viewed on mobile devices. The stacking order follows a left-to-right pattern, meaning:
- Left columns appear at the top
- Right columns appear below
Example: If you have a two-column layout with text on the left and an image on the right, the text will display above the image on mobile.
Reversing the Stack Order
Sometimes the default stacking order doesn't work for your design. For instance, you may want an image to appear above text on mobile, even though the image is positioned on the right in your desktop layout.
How to Reverse Column Stacking
- Select the section wrapper containing your columns
- Navigate to Mobile Styles in the plugin
- Click the Reverse Stack Column button
This reverses the stacking order, placing right-side content above left-side content on mobile devices.
Disabling Column Stacking
In some cases, you may want to keep columns side-by-side on mobile instead of stacking them vertically.
How to Disable Stacking
- Select your section wrapper
- In Mobile Styles, uncheck both stacking options
Note: While this keeps your columns in a row on mobile, it may not provide an ideal user experience in most cases. Use this option sparingly and only when your design specifically requires it.
Best Practices
- Preview your emails on mobile devices to ensure your stacking choices create a good user experience
- Reverse stacking is particularly useful for image-text layouts where visual hierarchy matters
- Avoid disabling stacking unless your content is specifically designed to work in narrow columns
Powered by