try this code
@media only screen and (max-width: 767px) {
.grid.sm-grid-cols-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.col-sm-order-2 {
grid-row: 2;
}
}
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.
1 Like