Image With Text - how to make image second on mobile

[kckc2022]

The default for the "image with text" section on mobile is to show image first then text below it. How can I change this so that the text shows first and then the image is below it?

[thirtycoders]

Please share your store url @kckc2022 

[kckc2022]

I'm using this theme: https://themes.shopify.com/themes/refresh/styles/default/preview

[thirtycoders · Accepted solution]

Hi @kckc2022,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

@media (max-width: 768px) {
    .image-with-text__grid.grid.grid--gapless {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

Thanks!

[kckc2022]

That worked! Thank you!

[thirtycoders]

You're welcome!