Project Order Messing Up on Mobile

Is there a css code to use so my projects to stay in order when it goes down to mobile? The order goes from left to right.

Example: (12th South Residence, Belle Meade Residence, so on) 

In the mobile version the order is correct until it get to after the Ponte Vedra project. Then it gets out of order. Everything above Ponte Vedra is in the correct order on the mobile version.

Anything you can do to help with this? 

https://www.berschbackdesign.com/projects

The way that this version of Squarespace (7.0 classic editor) works on mobile is that it stacks up everything in each row from the left column to the right column, and then does the next row.

At the top of your page you have the text and image in the left column and then the text and image in the right column, then you have a new row with two images, like this:

Then you get to the next row, and it has the left column that contains three images + text stacked vertically, and the right column has 3 images + text stacked like this:

So that's why they are correctly in order and then go into the wrong order.

In order to correct this you are going to need to redo the layout and create individual rows for each pair of images. I like doing this by having full width spacer blocks, and dragging one image between them first, then drag the second to be next to it, then drag the two text blocks in and stack them on top of each of the images. Once you have the rows set up, you can remove the spacer blocks that you added.

I hope that makes sense, it's not too difficult to do, but tricky to explain with enough clarity!

@Ziggy is there a way to fix it so the images are still stacked from left to right? Visually it looks better when its a row of 2. 

Do you know how to fix this @CassAggett?

Thank you @Ziggy!