Mobile Stacking Order (7.1)

Site URL: https://carillon-flower-3xhs.squarespace.com/

Hello. I need to modify the mobile stacking order of content in a 3-column image/text/spacer layout.

Site password: XRdesign

Jump or scroll to the "Process" section. For larger displays, the order of the content blocks is:

ROW A: Image — spacer — Text

ROW B: Text — spacer — Image

... rinse and repeat.

On mobile they all need to follow one pattern:

COLUMN: Image — spacer — Text

I've done a search on this and there were a number of threads covering but they all kind of dead-end(ed). I honestly feel like a fix to this should have been baked into 7.0 since it's such a common UI pattern. Any help would be appreciated. And thank you! 🙏 

Bueller? 🥶

Thank you sooo much @tuanphan. That worked like magic, and just in time for my client meeting in 2 minutes! #lifesaver 🤗🤗🤗

I believe I am looking to do something similar to this. Looking for images to stack 2 across on a mobile device. On a desktop the page is set to have 4 columns, I am looking for it have 2 on a mobile device. Any help with this would be much appreciated. I would also like to understand how I can apply this technique to other pages.

URL: https://kamiscollection.com/photography

14 hours ago, kevinkamis said:

I believe I am looking to do something similar to this. Looking for images to stack 2 across on a mobile device. On a desktop the page is set to have 4 columns, I am looking for it have 2 on a mobile device. Any help with this would be much appreciated. I would also like to understand how I can apply this technique to other pages.

 

URL: https://kamiscollection.com/photography

You can change gallery to grid, then I can give the code to stack 2 images on mobile.

The current layout is difficult to use code.

How does this work? Looking at the original solution. I can see that it works and I've translated it successfully to one of my sites but with another I can't get it to work. The block 

#block-yui_3_17_2_1_1578277238401_75781

seems to be the spacer above the two blocks that the OP wanted to switch on mobile- is that correct?

On 2/24/2021 at 8:00 PM, FatFatAlbert said:

How does this work? Looking at the original solution. I can see that it works and I've translated it successfully to one of my sites but with another I can't get it to work. The block 

#block-yui_3_17_2_1_1578277238401_75781

seems to be the spacer above the two blocks that the OP wanted to switch on mobile- is that correct?

 

Can you share link to page where you have problem? We can help easier

Hi @tuanphan I'm looking to do something similar if you're able to help, please?

Currently have alternating left & right staff profiles which is great on desktop but need to stack Image over copy on mobile.

22 hours ago, GBD said:

Hi @tuanphan I'm looking to do something similar if you're able to help, please?

Currently have alternating left & right staff profiles which is great on desktop but need to stack Image over copy on mobile.

Site: https://fuchsia-burgundy-n6es.squarespace.com/who-we-are
Password: TCC_2022

Found the fix for this if it's useful to anyone - apply to each data section as needed:

 

//Reverse block order on mobile//

section[data-section-id="000000000000000000"] {

.content-wrapper {

   padding-top: 0!important;

}

@media screen and (max-width: 767px) {

  .sqs-row {

    display: flex;

    flex-direction: column-reverse;

  }

}

}

Hey @tuanphan,

I also need help with mobile stacking order. 

Ask you can see in Desktop view, in the Projects section, the text on right is associated with the image on the left. So In the Projects section, on mobile, I need the photo to stack above the associated text in the right order. It should go photo > text > photo > text on down the list. 

Also, on Desktop, in the projects section, is there a way to maintain the vertical spacing between project entries responsively so the top of the photo is always aligned to the top of the associated text box on the right? 

Site URL: https://coyote-lynx-l6l3.squarespace.com/

Password: 1

Can you help? Thank you!

16 hours ago, kdkovacs said:

Hey @tuanphan,

I also need help with mobile stacking order. 

Ask you can see in Desktop view, in the Projects section, the text on right is associated with the image on the left. So In the Projects section, on mobile, I need the photo to stack above the associated text in the right order. It should go photo > text > photo > text on down the list. 

Also, on Desktop, in the projects section, is there a way to maintain the vertical spacing between project entries responsively so the top of the photo is always aligned to the top of the associated text box on the right? 

Site URL: https://coyote-lynx-l6l3.squarespace.com/

Password: 1

Can you help? Thank you!

Hi,

This is not possible if you keep green line between image/text.

Hi @tuanphan thanks for your reply. 

Are both questions not possible? What about just the first question about mobile stacking order? I hid the vertical line on mobile. 

Thank you! 

19 hours ago, kdkovacs said:

Hi @tuanphan thanks for your reply. 

Are both questions not possible? What about just the first question about mobile stacking order? I hid the vertical line on mobile. 

Thank you! 

I see both looks fine??