Image with text section - how to move text above image (instead of after) in mobile view?

Store Design
,

Topic summary

Goal: On Taiga theme’s homepage “Image with text” section, show text above the image on mobile only, while keeping the side-by-side layout on desktop.

What was tried:

  • Initial CSS using grid (.grid.sm-grid-cols-2 and .col-sm-order-2) successfully reordered on mobile but risked affecting desktop. User asked for a mobile-only approach.
  • A flex/column-reverse snippet targeting a complex selector didn’t work as intended for the OP.

Working solution (confirmed):

  • Add a CSS media query for small screens (≤768px) in the theme’s main CSS (base.css or theme.css) that:
    • Sets the “image with text” container to display:flex and flex-direction:column on mobile.
    • Uses order to place the text block first and the image block second (e.g., .media-with-text .p-page {order:1;} and .media-with-text .col-sm-order-2 {order:2;}).
  • This preserves the desktop layout and flips only on mobile.

Notes:

  • An alternative mobile-only rule using grid-row:2 on .col-sm-order-2 was also suggested.
  • Screenshots were shared to illustrate the mobile result.

Status: Resolved. The OP confirmed the media-query flex solution works.

Summarized with AI on December 26. AI used: gpt-5.
3

Thank you so much! This has worked well for mobile

One more thing however - is it possible to add something to make this only apply to mobile? I liked the side by side style on the desktop previously and would love to keep that the same as before on desktop, and only make this new change to mobile if possible