Key takeaways
- The Theme Editor includes a mobile preview mode — click the phone icon at the top to check how your layout looks.
- Some themes let you reorder blocks differently for mobile via “Mobile layout” settings inside sections.
- For fully independent mobile ordering (different from desktop), CSS flexbox order or Fudge is required.
- Always test on a real device after making changes — the preview isn’t always pixel-perfect.
Most Shopify themes are designed to stack vertically on mobile, which works well for simple layouts. But when you have a section with multiple columns or blocks, the stacking order may not match what makes sense for mobile shoppers.
This guide explains your options, from what’s available inside the Theme Editor to when you’ll need code.
Why mobile order matters
On desktop, a two-column section might show an image on the left and text on the right. On mobile, both stack — but which one appears first? The reading order on mobile directly affects conversion. If your headline appears below your image, visitors have to scroll to understand what they’re looking at.
Getting the order right is especially important for product feature sections, hero content, and announcement bars.
Method 1 — Use the Theme Editor mobile preview
Step 1 — Open the Theme Editor. Go to Online Store → Themes → Customize.
Step 2 — Switch to mobile preview. Click the phone icon at the top center of the editor. This shows you how sections will render on small screens.
Step 3 — Check section order. Sections stack in the same order as desktop by default. Drag sections in the left sidebar to reorder them — this affects both desktop and mobile.
Step 4 — Check block order within sections. Some themes show a “Mobile layout” option inside section settings. Look for it in the right panel when a section is selected.
This built-in approach covers most basic reordering needs without touching code.
Method 2 — Use theme “Mobile layout” settings
Themes built on Shopify’s Dawn framework (and many premium themes) include per-section mobile layout controls. These appear in the section settings panel when you select a section in the Theme Editor.
Common options you might see:
- Stack order — text above image vs. image above text on mobile
- Column count on mobile — 1 column vs. 2 columns
- Block visibility — show or hide specific blocks on mobile
If your theme has these, use them first before reaching for CSS. They’re the safest option because they’re officially supported.
Method 3 — CSS flexbox order (code required)
When you need the mobile order to be completely different from desktop — for example, a three-column layout where the middle block should appear first on mobile — CSS is the right tool.
Add this to your theme’s assets/base.css file (always duplicate your theme first):
@media (max-width: 767px) {
.your-section-class {
display: flex;
flex-direction: column;
}
.your-block-first-on-mobile {
order: 1;
}
.your-block-second-on-mobile {
order: 2;
}
}Finding the right class names: Right-click the element in your browser → Inspect → copy the class from the HTML. Look for section-specific classes rather than generic ones.
This method gives you precise control but requires some familiarity with browser dev tools and CSS.
Method 4 — Use Fudge for fully custom mobile ordering
If your layout requires a fundamentally different structure on mobile — not just reordering, but different content, different section types, or responsive block logic — the CSS approach gets complicated quickly.
Fudge lets you describe exactly what you want:
“On mobile, move the product description above the product images. On desktop, keep the standard two-column layout.”
Fudge generates the code, you review the draft, and approve when it looks right. No manual CSS writing, no class hunting.
What about section ordering vs. block ordering?
These are two different things:
Section ordering — the sequence of major sections on the page (hero, features, testimonials, etc.). The Theme Editor handles this with drag-and-drop, and the order is the same on desktop and mobile.
Block ordering — the sequence of elements within a section (image vs. text, or the order of testimonial cards). This is where theme settings or CSS come in.
If you’re trying to show a completely different page structure on mobile (different sections entirely), you’ll need to use CSS display: none to hide specific sections on each breakpoint and create separate mobile-only and desktop-only versions.
Common mistakes
Reordering in desktop view without checking mobile. Always switch to the mobile preview after changes — what looks fine on desktop can look broken on mobile.
Editing the live theme. Duplicate your theme before touching the code editor. One bad CSS rule can break your store’s layout entirely.
Using JavaScript for layout order. CSS handles reordering at the rendering level. JavaScript-based reordering causes layout shift (CLS), which hurts your Google PageSpeed score.
