Reorder Sections on Mobile | Squarespace 7.1

What does this code do?

This code snippet will allow you to change the order of sections on the mobile view of your Squarespace 7.1 site.

Note: This code snippet changes the order of whole sections. If you just want to change the order of a few blocks, check out this code snippet.

Video Tutorial

You can find the code used in the tutorial to create the layout here.

Code Snippet

Copy and paste this code into Design > Custom CSS

/* 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;
    }
  }
}

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. Change the 1, 2, 3, 4, or 5 to match the section you are trying to change.