Re-order Columns/Content on Mobile

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.