How can I reorder my mobile image banner and content container?

Store Design
, , ,

Topic summary

A user wants to reorder elements in their mobile image banner so the content container (heading, body text, and button) displays above the image instead of below it.

Proposed Solution:

  • Rearrange HTML elements in the banner.liquid or sections file
  • Adjust the order so content elements appear before the image element in the markup
  • Apply CSS adjustments specifically for mobile view to control the display order

Technical Approach:
The solution involves modifying the Liquid template file structure and potentially adding mobile-specific CSS rules. The responder provided a code example showing how to restructure the section elements, though the exact code snippet appears partially corrupted in the thread.

Status: Initial guidance provided; implementation details may need clarification due to formatting issues in the response.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to rearrange my Image Banner for Mobile so that my content container with heading, body and button appears first before the image on Mobile. Can anyone help me how to do this?

This is the preview link:
https://0wy1xe6ykihurgfg-69874974986.shopifypreview.com

Thank you in advance!

2

Hi,

At sectionsorbanner.liquid rearrange the HTML Elements

Example:


  # {{ section.heading }}
  

{{ section.body }}

  {{ section.button_text }}

Adjust CSS for Mobile View