Reordering Blocks for Mobile

Site URL: https://www.tikipartyrentals.com/pricing-parties-1

Hello! I have been reading around the forum to try to find a quick fix to reordering image blocks on my client's website so they go in the correct order across all formats, but cannot seem to get it right. The issue I'm having is that the images I have ordered correctly for desktop and tablet are becoming out of order on the mobile version. 

For example, my desktop version looks like this:

Image 1 - Image 2

Image 3 - Image 4

...

But on mobile, it looks like:

Image 1 

Image 3

Image 2

Image 4

I know I need custom CSS to solve this but am not sure exactly what that would be. Any help provided would be greatly appreciated! Thanks in advance!

No need to use CSS. You need to adjust layout a bit

First, add Image 1, text 1, image 2, text 2

Next, add Line Block

Next, add Image 3, text 3, image 4, text 4

Next, add Line Block

...

Then remove all Line Blocks.

Done.

On 10/1/2020 at 6:49 PM, tuanphan said:

No need to use CSS. You need to adjust layout a bit

First, add Image 1, text 1, image 2, text 2

Next, add Line Block

Next, add Image 3, text 3, image 4, text 4

Next, add Line Block

...

Then remove all Line Blocks.

Done.

Thanks for this suggestion. Unfortunately, it did not work with my website. Text and images are still appearing out of order

Hey @Madelyn, 

I can confirm you won't indeed need code for what you are trying to achieve. The order of your blocks will depend on the structure of your columns and rows. Here's a Squarespace help article that covers this in more detail:

Page and block layout changes on mobile devices

This guide also has a help video at the top, which explains how can you get the desired order of your blocks when your site is viewed on a mobile device. 

For any further questions/assistance, reach out to Squarespace Customer Support, who is available 24/7 and happy to offer personalized assistance.