A simple swap of image and text order for mobile?

Site URL: http://workbypage.com

Hey all, I'm a designer by trade slowly familiarising myself with coding. Although I've seen this issue posted plenty, I haven't found a solution that fits my specific site layout. What I want to do is simple.

I currently have a desktop arrangement at the top of my site which arranges 2 rows of images as:

<IMAGE> <SPACER> <TEXT>
<TEXT> <SPACER> <IMAGE>

As I scale to mobile, the images and text don't arrange as alternating. It stacks as:

<IMAGE>
<TEXT>
<TEXT>
<IMAGE>

This is less than ideal and butts two text fields next to each other. As it scales to mobile I'd like it to go:

<IMAGE>
<TEXT>
<IMAGE>
<TEXT>

If anyone can help guide me to force the site to do that, it'd be hugely appreciated. I'm referencing the second section of the homepage, titled 'Work by page'.

Site: workbypage.com
Pass: Car19Elephant19

All the best, and thanks in advance! Also, thanks for all the help you've been giving here so far, I've used much of the responses I've found to similiar issues I had as others.

Asa

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1575728611262_19566+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

@tuanphan wow thank you, that worked a treat. I really appreciate your help and I've also chimed in on some of the other help you've offered on this forum – thank you so much for your activity on here, there will be many many others who are using snippets of your work all over the world.

Thanks again Tuan – cảm ơn bạn!

All the best,
Asa