How do I get the images to stack consistently? | Squarespace 7.0

Site URL: http://thepurposeworks.com/our-services

Hi there, 

website link: http://thepurposeworks.com/our-services
no password needed / site is live

I was hoping someone would be able to provide a solution to getting these images to stack consistently. I wanted to create an alternating text/photo scroll, with the image switching right/left each section. 

On desktop the layout is great. See screenshot #1.

The issue is on mobile. See screenshot #2. Essentially I would prefer for the image to be placed above each header, instead of under the paragraph. What I have noticed is that when the image is on the right on the desktop it defaults to going under the text, and when it is on the left it defaults to above. 

Please note this site is still working on Squarespace 7.0 (Heights template).

Please let me know if anyone has any ideas/solutions -- should I just switch to the "card" style image block instead?

Any advice/suggestions would be greatly appreciated! 

Add to Design > Custom CSS

/* Mobile-Our services */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1621863139822_44257+.row, div#block-yui_3_17_2_1_1618276501267_51660+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

}

Hi there, I am not sure if this bumps the original post to the top, but I have this exact question for a 7.1 build. I tried the code above and it did not work unfortunately 

On 9/18/2021 at 3:46 AM, bhbeny said:

Hi there, I am not sure if this bumps the original post to the top, but I have this exact question for a 7.1 build. I tried the code above and it did not work unfortunately 

I think above code for 7.0

Can you share link to page where you have problem?