Swap Image and Text Block Positions in Mobile

Hi,

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

Text

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

Boy in Red Sweatshirt Photo

Text

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?

Thanks!

Jeff

Can you share your website URL and page?

I edited the post. Try refreshing the page.

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!

Hey, 

Thanks for your attempt, but that still doesn't seem to do it.  I've tried a few of these types of things I found on the forums so far, but nothing seems to budge in mobile.

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.  

Perhaps another idea is to figure out a way to turn off text wrapping in mobile only.