Why Re-ordering Columns on Mobile Matters
By default, columns in a row that are laid out horizontally on the desktop normally will stack vertically on mobile. However, sometimes the automatic column order may not align with your desired layout.
A Real-life Problem Statement:
You’re a Shopify store owner. You’ve designed a desktop layout with a 2-column row:
- Column 1 – The image
- Column 2 – Expert thought and CTA button
On desktop, this layout flows well. But on mobile, the content stacks vertically by default. Here’s the issue:
- The image appears first, but the testimonials show up before the CTA button, pushing the CTA further down the page.
- Users may lose interest before reaching the CTA, affecting conversion rates.
As your page transitions from desktop to mobile, ensuring the correct order of columns helps maintain flow and readability.
A well-organized mobile layout enhances user experience, making it easier for visitors to navigate and engage with your content.
Here’s how you can re-order columns on mobile in a few simple steps:
Step-by-Step Guide to Re-order Columns on Mobile
Step 1: Start by opening your page in the GemPages editor. Navigate to the row where the content you want to re-order is located.
Step 2: Select Mobile View
Step 3: Click on the row containing the columns you want to adjust. This will display the row’s settings panel on the left-hand side of the editor.
Step 4: Re-order the Columns that suits your mobile layout best.
This gives you full control over how the content appears in a vertical stack.
Step 5: After confirming the new order of your columns, hit ‘Save’ and then ‘Publish’ your changes to apply them live to your site.