Help with re-Ordering blocks on Mobile.

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/travel-house

Hello I am looking for some help in re-ordering blocks on this page here: https://tulip-ranunculus-xc8d.squarespace.com/travel-house

In the "Aruba Takeover 2021" Section I would like the gallery block to stack first on mobile above the text content.

I have seen a few similar threads but not having any luck with those solutions. 

Any help/guidance is appreciated! 

59 minutes ago, Dhowbearcat said:

Site URL: https://tulip-ranunculus-xc8d.squarespace.com/travel-house

Hello I am looking for some help in re-ordering blocks on this page here: https://tulip-ranunculus-xc8d.squarespace.com/travel-house

In the "Aruba Takeover 2021" Section I would like the gallery block to stack first on mobile above the text content.

I have seen a few similar threads but not having any luck with those solutions. 

Any help/guidance is appreciated! 

Can you share the protected password?

Yes sorry pw: "SuperTrip"

Add to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
	#collection-61527cba855cb5447a3b6abe {
		.Index-page {
			.sqs-layout.sqs-grid-12.columns-12 {
				.row {
					display: flex;
					flex-direction: column;
					.span-6 {
						&:first-child {
							order: 1;
						}
					}
				}
			}
		}
	}
}

Hope it is helpful for you

Result

Is this what you mean?

Yes Thanks Banank36! How did you know what collection and classes to target?

I'm sure I will be doing this on other pages. So would like to know for the future.

5 hours ago, Dhowbearcat said:

Yes Thanks Banank36! How did you know what collection and classes to target?

I'm sure I will be doing this on other pages. So would like to know for the future.

 

You can use the extension Squarespace ID Finder and follow the steps to get the right id 

About the targeted classes, you can get reference in Css selector

Bangank36,

I am trying to target and make the slide show images appear bigger on mobile for the "Brendan's Dirty 30" Image slider. Could you provide some help here?

@bangank36 with this code it swaps the position of the "THE BREATHLESS EXPERIENCE: PUNTA CANA" gallery and content on mobile. I want the gallery to always appear first on mobile for each section.

@Dhowbearcat Don't remove above code

Add this to Design > Custom CSS

@media screen and (max-width:640px) {
section#up-trip-pt2 .columns-12>.row {
    flex-direction: column-reverse !important;
}
}

On 10/2/2021 at 12:26 PM, bangank36 said:

Add to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
	#collection-61527cba855cb5447a3b6abe {
		.Index-page {
			.sqs-layout.sqs-grid-12.columns-12 {
				.row {
					display: flex;
					flex-direction: column;
					.span-6 {
						&:first-child {
							order: 1;
						}
					}
				}
			}
		}
	}
}

Hope it is helpful for you

On 10/9/2021 at 4:18 AM, tuanphan said:

@Dhowbearcat Don't remove above code

Add this to Design > Custom CSS

@media screen and (max-width:640px) {
section#up-trip-pt2 .columns-12>.row {
    flex-direction: column-reverse !important;
}
}

 

Thanks @tuanphan that worked.