Custom CSS to change block order

Website: https://vibraphone-plantain-39ts.squarespace.com/media

On the Media page, the blocks are meant to be read left to right, however on mobile view this is changed from top to bottom of the first column, then top to bottom of the second column.

I am looking for the CSS to change the mobile view to:

Block 1
Text 1 (Garden House)
Block 2
Text 2 (Road House)
Block 3
Text 3 (Road House)
Block 4
Text 4 (Road House)
Block 5
Text 5 (Hideout House)

Any assistance here would be greatly appreciated! Thanks!

You don't need CSS or code to correct this behaviour. Instead, you need to drag the blocks into the correct places. I know this may sound unlikely, but trust me. When you add blocks to the page you are adding them to a grid. In this case, you've created two columns, and placed blocks in them. This is why they compress in the way that they do.

Instead you need to drag them so that you create rows, not columns. It's easier to do by adding some line blocks to the page and then placing the blocks between them. Then remove the lines when finished. If you need help with this, let me know.

@Paul2009 Thanks for your response! Will this change the look of the desktop view? The way it's currently laid out on the desktop is the way I'd like it to remain. If you could explain what you mean a bit more I'd appreciate it. When I try dragging the top two videos around, for instance, I don't see any other way than to make those two columns. Thank you!

@Paul2009 Thanks for your response! Will this change the look of the desktop view? The way it's currently laid out on the desktop is the way I'd like it to remain. If you could explain what you mean a bit more I'd appreciate it. When I try dragging the top two videos around, for instance, I don't see any other way than to make those two columns. Thank you!

No, it doesn't affect your layout, just the flow. For example, here's a quickly assembled video showing four blocks. To start with they are in columns like yours and they show up in the 'wrong' order on mobile. Rearrange them into rows and they appear correctly.

No, it doesn't affect your layout, just the flow. For example, here's a quickly assembled video showing four blocks. To start with they are in columns like yours and they show up in the 'wrong' order on mobile. Rearrange them into rows and they appear correctly.

Got it! Thank you so much! I was having a little bit of trouble with the text that was supposed to be below each image block but I changed those to captions instead of text blocks and it did the trick. Much appreciated!!

Got it! Thank you so much! I was having a little bit of trouble with the text that was supposed to be below each image block but I changed those to captions instead of text blocks and it did the trick. Much appreciated!!