Reorder Sections on Mobile | Squarespace 7.1
When you create a website in Squarespace it automatically creates a mobile version for you by stacking your blocks and sections on top of each other. However, depending on the way you have used your sections, you may find that you want the sections in a different order on mobile.
In this video, I show you how reorder sections on the mobile view of your Squarespace 7.1 Site.
The following code is used in the video.
The key thing to remember is that all sections have a default order of zero. So if you want to change the order of two sections in the middle of your page, you will have to set an order for all of your sections.
/* Reorder Sections on Mobile */
@media screen and (max-width: 640px) {
#COLLECTIONID #page .sections {
display: flex;
flex-direction: column;
.page-section:nth-of-type(1) {
order: 1;
}
.page-section:nth-of-type(2) {
order: 2;
}
.page-section:nth-of-type(3) {
order: 3;
}
.page-section:nth-of-type(4) {
order: 4;
}
.page-section:nth-of-type(5) {
order: 5;
}
}
}
