Change promo grid block order on mobile only

[MaxineMakes]

I am using quite a few promo blocks to share process steps for custom orders. I love how it looks on the desktop view but, once I switch to mobile view, I don’t like how it is ordering them, and was hoping to change how they are ordered for mobile view only. I essentially always want the block with the image to be above the block with the text. Whichever block is placed on the left will always be above the block on the right when I switch to mobile. As you can see, some blocks have the image on the left and some on the right because I alternate as I go through the steps.

Here are views of how it looks on mobile. You can see how the order is text, image, image, text, text, image, image and so on. I want it to be image, text, image, text, image, text, and so on. I need the code to only affect every other block because half are working how I want them to, and half are not. Is this possible?

You can view the page I need assistance with here. Thank you in advance for the help!

[Anthony_David_1]

Looks you have custom coded this, looks good.

Can you add a class to the section that you need to change to reverts and add a CSS with media query

Hope this helps @MaxineMakes

[MaxineMakes]

Thank you for the reply. I don’t know how to do what you suggested. I customized the CSS to change the font color, which someone helped me with yesterday when I asked how to do it.

[Anthony_David_1]

Which theme is this? Unless i see the code i will not be able to properly guide you.

Is there any way you can copy the section code here @MaxineMakes

[Moeed]

Hey @MaxineMakes

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
@media screen and (max-width: 767px) {
.flex-grid.flex-grid--gutters.flex-grid--template--16916715471069__promo_grid_GrJPhf {
    flex-flow: column-reverse !important;
}
.flex-grid.flex-grid--gutters.flex-grid--template--16916715471069__promo_grid_Jbrfgz {
    flex-flow: column-reverse !important;
}
.flex-grid.flex-grid--gutters.flex-grid--template--16916715471069__promo_grid_tDiYmc {
    flex-flow: column-reverse !important;
}
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[MaxineMakes]

That worked perfectly! Thank you so much!!

[Moeed]

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.