Jump to content

Swap Image and Text Block Positions in Mobile

Recommended Posts


Page is: https://www.jeffgalferphotography.com/bio

I'm trying to figure out how to write the code so that the text block appears above the masked boy photo when in mobile only.  Once it hits mobile, the order of the blocks is:

Boy in Red Sweatshirt Photo

Masked Boy Photo


However, I'd like it to be in mobile:

Boy in Red Sweatshirt Photo


Masked Boy Photo

I have corrected this previously by not having the text wrap around the masked boy photo on desktop. However, I like the wrapping and I'd prefer to keep it. It unfortunately just also changes the positioning of the masked boy photo when in mobile, though, to on top of the text.  

Any ideas on this?




Edited by jg66ue
adding website
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

This guide should be helpful:

https://www.primitusconsultancy.co.uk/blog/how-to-reorder-blocks-for-mobile-squarespace-71#:~:text=From your Squarespace account%2C go,the Custom CSS editor box.&text=This will reverse the order of the block.&text=If you have 3 columns,to 3%2C2%2C1.

You code should look something like this:

@media screen and (max-width: 640px) {
 #collection-63c7a94b3a450023e95087aa {
  .sqs-row {
    display: flex;
    flex-direction: column;
  .col :nth-child(3) {order: -1;}

Hope that helps!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Part of the issue here is that the masked boy photo is located within the text container. I did this so that the text wraps around the photo as the screen gets smaller.  However, when the screen hits mobile, the text is being forced below the photo instead of above it.  If I take the masked boy photo out of the text container, I lose the text wrapping, but the text stays above the photo in mobile.  

Edited by jg66ue
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.