Dawn Theme Image With Text, Make Image Under Text On Mobile for specific section

Store Design
,
1

Hello, I am using the shopify Dawn theme.

For one of the image with text section I would like to make the image appear after the text, however on mobile the image always appears first, how can I fix this?

moosh44_0-1681276538246.png
moosh44_0-1681276538246.png400×149 19.2 KB

I only want to make this change for this specific section,

URL: https://bliskbeauty.myshopify.com/products/face-eye-mask-soothing-duo

Thanks in advance :slightly_smiling_face:

2

Hello @moosh44

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
.section-template--18663567556917__e7eb020c-fd9c-4a33-8e9b-bd10583da9f6-padding {
    display: flex;
}
.section-template--18663567556917__e7eb020c-fd9c-4a33-8e9b-bd10583da9f6-padding .image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
    order: 2;
}
}
3

Hello @moosh44 ,

Greetings for the day. This is Mahesh from StoreWatchers team.

Go to online store → customize → select Default product from top bar → Add section → Select Custom Liquid → custom CSS → add below CSS code in the text box.

@media only screen and (max-width: 600px) {
 .image-with-text__grid.image-with-text__grid--reverse{flex-direction: column-reverse;}
}

StoreWatchers_1-1681281380506.png
StoreWatchers_1-1681281380506.png555×606 43.5 KB

4

It does not work for me…where are possible error possibilities? I changed the section ID but it does not work.

5

If I want to do the same exact thing but instead of image with text then in the section “Collapsible content”. Thank you