Reorder Blocks on Mobile | Squarespace 7.1

What does this code do?

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

1. Change the Order of Images and Text on Mobile

2. Change the Order of Text in the Footer on Mobile

Note: This code snippet changes the order of blocks within one section. If you want to change the order of the sections on mobile, check out this code snippet.

Note 2: This code snippet is no longer needed with Fluid Engine. If you are working in Fluid Engine, you can edit the order of the blocks on mobile by clicking the mobile view button and dragging the blocks into the correct order.

#1) Change the Order of Images and Text on Mobile

Video Tutorial

Code Snippet

Copy and paste this code into Design > Custom CSS

/* Reorder Blocks on Mobile */
@media only screen and (max-width: 640px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) {
    .row {
      display: flex;
      flex-direction: column-reverse;
    }
  }
}

#2) Change the Order of Text in the Footer on Mobile

A common layout is to 3 columns in the footer with the logo in the centre and links on either side. However, on mobile this means you will have links, then the logo, then more links. This option is great for those wanting to change this order on the mobile view.

Video Tutorial

Code Snippet

Copy and paste this code into Design > Custom CSS

/* Reorder Blocks on Mobile */
@media only screen and (max-width: 640px) {
  footer .page-section:nth-of-type(1) {
    .row {
      display: flex;
      flex-direction: column;
    }
    .col:nth-of-type(1) {
      order: 2;
    }
    .col:nth-of-type(2) {
      order: 1;
    }
    .col:nth-of-type(3) {
      order: 3;
    }
  }
}

Bonus: If you want the links next to each other on mobile, use this code instead.

/* Reorder Blocks on Mobile */
@media only screen and (max-width: 640px) {
 footer .page-section:nth-of-type(1) {
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
   .col:nth-of-type(1) {
     order:2; 
     width: 50% !important;
   }
   .col:nth-of-type(2) {
     order:1;
     width: 100% !important;
   }
   .col:nth-of-type(3) {
     order:3;
     width: 50% !important;
   }
  }
}

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 to match the section you are trying to change.