Display text before image -> Multirows on phone

Shopify Discussion
,

Topic summary

A user wants to reposition text elements in a multi-row section to appear above images on mobile devices, rather than below them as currently displayed. The theme settings don’t offer a built-in option for this layout change.

Proposed Solution:
Another user suggests using CSS to control the display order on mobile:

  • Apply the CSS order property with media queries
  • Target screens with max-width of 767px (mobile devices)
  • Set order: -1 on the text element to move it above the image

This CSS-based approach would override the default layout specifically for phone screens without affecting desktop display.

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

Hello, I want to display the text of a row inside a multi-row above the image on phone. Currently, it only displays under the images and there is no setting to change that. I want both the title and text above the image of the row.

Schermafbeelding 2024-10-20 155942.png
Schermafbeelding 2024-10-20 155942.png1918×1024 266 KB

2

Use css order property

@media(max-width:767px){

.image-with-text__text-item {
order: -1;
}
}

1 Like