How to reorder blocks for Mobile Squarespace 7.1
Designing a website that looks great on both desktop and mobile can be challenging. One common issue users face in Squarespace 7.1 is that content blocks don’t always appear in the desired order on mobile screens. This happens because Squarespace stacks blocks vertically by default in the order they were added, which might not reflect your intended mobile layout.
In this tutorial, you’ll learn how to reorder blocks for mobile views in Squarespace 7.1, ensuring that your layout remains visually appealing and intuitive across all devices.
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.
Table of Contents
Why Reorder Blocks on Mobile
Step-by-Step Instructions
Key Takeaways
FAQs
Conclusion
Why Reorder Blocks on Mobile?
To improve the user experience by presenting content in the right sequence.
To highlight important information earlier on smaller screens.
To avoid confusing or broken layouts caused by automatic stacking.
Complexity: Easy
See example below of the issue below.
Page display on desktop
Page display on mobile
Step-by-Step Instructions
Method 1: Use Custom CSS for Advanced Reordering
Step 1
Identify the Section IDs for the block using the plugin mentioned above
Step 2
From your Squarespace account, go to the Custom CSS Editor and 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 reversed to 3,2,1. If you want a 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;}
}
}Method 2: Use Fluid Engine to Reorder on Mobile
If your section uses Fluid Engine (Squarespace’s drag-and-drop editor), you have more control.
Steps:
Enable Fluid Engine for your section (new sections use it by default).
Toggle to the mobile view in the editor.
Manually drag and reposition blocks as you want them to appear on mobile.
The changes will not affect your desktop layout.
💡 Note: Fluid Engine gives you responsive freedom, including resizing, overlapping, and reordering blocks by breakpoint.
Key Takeaways
Squarespace stacks blocks left-to-right and top-to-bottom on mobile.
Use Spacer Blocks to influence stacking order in column layouts.
Fluid Engine allows drag-and-drop positioning for mobile-specific layouts.
Advanced users can use custom CSS to control block order based on screen size.
FAQs
Why does my content appear out of order on mobile?
Because Squarespace stacks columns left to right and blocks top to bottom — what looks aligned on desktop may not look that way on mobile.
Can I reorder blog content or summary blocks?
No, these follow default templates. To control their order, create custom sections using layout blocks.
Will reordering on mobile affect my desktop layout?
Not with Fluid Engine. Any changes made in mobile view stay exclusive to mobile.
Conclusion
Understanding how Squarespace handles responsive layouts empowers you to build mobile-friendly pages that maintain clarity and structure. Whether you’re using Spacer Blocks, Fluid Engine, or custom code, reordering blocks for mobile enhances your visitors' experience—especially as more users browse on smaller screens.
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, expressed 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.
