How to reorder blocks for Mobile Squarespace 7.1

This tutorial will show you how to reorder blocks on mobile in Squarespace 7.1. There are instances where the blocks do not line up in the order we like them to be on mobile devices compared to what is viewed on desktop. The reason why the order of blocks on your mobile version may go awry is that responsiveness on mobile devices works in columns.

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

Complexity: Easy

See example below of the issue below.

Page display on desktop

Page display on mobile

---

Step 1

Identifiy the Section IDs for the block using the plugin mentioned above

---

Step 2

From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.

//Reverse block order on mobile
@media screen and (max-width: 640px){
section[data-section-id="#"] {
  .sqs-row {
    display: flex;
    flex-direction: column-reverse !important;
  }
 }
}

For this example the section id is section[data-section-id="62be0732d6854d645a6ad3e3"]

---

Step 3

This will reverse the order of the block.

---

Step 4

If you have 3 columns with the row, 1,2,3 will be revered to 3,2,1. If you want column to be the first to be seen like 2,1,3.

Then use the code below.

@media screen and (max-width: 640px){
section[data-section-id="62be0732d6854d645a6ad3e3"] {
  .sqs-row {
    display: flex;
    flex-direction: column;
  }
  .col :nth-child(2) {order: -1;}
  }
}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.