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

[MEIS]

Under my products on my products page ( my site is https://9bf815-10.myshopify.com/products/deep-groove-ball-bearings, using Dawn Theme) I have a "multirow" section inserted.

However, for just for mobile I would like to make a change so that the text appears first followed by the image - currently the image is first and the text is then underneath and i want to keep the text and image side by side in desktop

Is there a simple custom code I could add that would make just this specific image with text section reverse order for mobile view?

Thank you so much in advance!

[dws_pvt_ltd · Accepted solution]

Hello @MEIS, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open base.css" OR "theme.css".
6. Add the following code at the end of the file.

Or you can add this CSS in your "image-with-text.liquid" section file.

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

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[MEIS]

It worked! Thank you so much! 

[BSS-TekLabs]

- Here is the solution for you @MEIS 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (max-width: 600px) {
.image-with-text:not(.collapse-corners,.image-with-text--overlap) .image-with-text__media-item {
    order: 1 !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.