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. 

For example:

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:

How to Re-order Columns on Mobile (Step-by-Step)

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.

Final Tips

• Test your layout on multiple mobile screen sizes for best results.
  
• Keep CTAs and key messages above the fold for higher visibility.
  
• Consider duplicating rows for desktop vs. mobile if layout logic becomes too complex.