Changing the display order of code blocks on mobile

Site URL: https://www.georgecomatas.com/

Hi there!

So, I have an issue that I'd really love some help solving if possible—but I'm not sure how plausible it is. On the homepage of my site, I have what looks like an index page but what is, in reality, several code blocks stacked and aligned to appear like an index. I've done this so that I can make each thumbnail highly customized—if you hover over each one, you'll see there's an image/text overlay.

The only issue is, on mobile the code blocks display completely in the wrong order. As I have it now on desktop, the thumbnails display in the order I want them to appear, in rows from right to left. But on mobile, they display as one single column—and it displays them going down on the left side first and then the right side. So, while they display as 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 on desktop, they display as 1, 3, 5, 7, 9, 2, 4, 6, 8 10 on mobile.

I cannot for the life of me figure out how to correct this so they display in the same order on mobile. I imagine this would be solved/fixed with some coding finesse, but I'm stumped.

If there's anyone with a bit more HTML/CSS experience than me who might have a solution or be able to help, it'd be GREATLY appreciated.

Thank you so much!

Hi. It looks like you solved this?