swap block order in mobile view

Lots of folks have asked a similar question in different ways and there don't seem to be answers posted, so I figured I'd try again. This community is such an amazing resource!

I am wondering if there is a way to use CSS to swap the order of blocks in mobile view so that you can specify some blocks to stack right to left rather than the standard left to right. So something like:

 @media only screen and (max-width: 640px) {
  //identify blocks you want to swap and change their order
}

My site is fh-partners.squarespace.com. Here's what I want to do specifically (on the team page):

I really like my desktop arrangement, which is:

<1 picture> <2 text>
<3 text> <4 picture>

Ideally I would like my mobile view to be arranged:

<1 picture>
<2 text>
<4 picture>
<3 text>

But squarespace goes left to right so it ends up as:

<1 picture>
<2 text>
<3 text>
<4 picture>

Is there css to swap blocks 3 and 4 in the mobile view?

Thank you in advance!

Yo dawg,

Squarespace uses LayoutEngine which is the system used to place blocks on a page. This system is automatically set up to stack blocks when the browser window shrinks, and obviously stacks them one after another on mobile. Because this system is automatic, there is not a way to rearrange the order on mobile. It is also not recommended to add custom code to modify LayoutEngine in any way.

Thanks for the reminder about the risk of using custom code. I understand that SquareSpace never recommends futzing with their defaults. However, I'd love to see if someone in the community knows how to make this happen, since lots of people seem to have similar questions.

Hi there. Give this a try.

@media only screen and (max-width: 640px) {
   #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) {
       display: table;
   }
   #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child {
       display: table-footer-group;
   }
}

Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table.

Let me know how it works for ya.

-Brandon

Keep in mind that this code is very specifically written for your current row/column/block arrangement. If you rearrange things, this code would have to be refactored. But this at least shows it's possible (and not that difficult) to do, and gives you a pattern to follow if you need to modify it in the future.

Reference: http://stackoverflow.com/questions/220273/

Another option may be to float the images instead of making distinct columns for them. I believe that then the images will always be first in the document flow even when floated to the right. This would of course cause the text to flow around the image, rather than staying within its own column which may or may not be desirable to you.

Wow @BrandonW. You are truly amazing. Thank you so, so much. The code works perfectly! I am extremely grateful.

Cool man; glad that worked. You deserve some credit for your very clearly articulated question. That makes a big difference when it comes to unique requests.

Hi @BrandonW. I hope you're doing great! I just posted a similar question here.I would be extremely grateful if you might take a look.

I have a very similar problem and tried to adapt your code to my layout, but just can't manage :/

Would you be able to help me out, Brandon?

My site:http://www.sebastiandressel.com/#/filmography/

Hi @aarnaa and @BrandonW. Thanks for the thread above. I have a similar situation with (3) pairs of image/text blocks that I need to reorder on Mobile.

On Desktop I have: 1. Text, Image 2. Image, Text 3. Text, Image

What code would I use to make Mobile: 1. Image 2. Text 3. Image 4. Text 5. Image 6. Text

Thanks!

Hi @aarnaa and @BrandonW. Thanks for the thread above. I have a similar situation with (3) pairs of image/text blocks that I need to reorder on Mobile.

On Desktop I have: 1. Text, Image 2. Image, Text 3. Text, Image

What code would I use to make Mobile: 1. Image 2. Text 3. Image 4. Text 5. Image 6. Text

Thanks!

It's probably better to post a new questions with a link to the page. Code like that can be very specific and is not always practical in certain situations. aarnaa's was a simple use case.

Hi Brandon!

I hope this is not annoying but I came across this answer for an exact issue. I've been trying to apply the code to my page (with corresponding divs) but still can't figure out the correct css code. I was wondering if you could give me some guidance.

This is the page I am having problems with: www.angela-w.com

I am trying to line up the images above each explanation text blurb on mobile view so that it's image > text on mobile for every instance.

Thanks so much!

angelawang0524: I did take a look at your site, but your layout is very sporadic. What I mean is, the manner in which you have each row layed out is sporadic, such that there is little common pattern. In some cases, you have spacer blocks, others, not. In some cases you have rows inside rows, others not. So it's too difficult to write rules for any pattern. This happens when dragging-and-dropping in layout engine...it can result in a layout that looks like you want it but is in fact quite messy. Unfortunately that's the case here, so I can't seem to write reliable rules for your situation.

Another way to do it, is to duplicate your content blocks and then hide / show the ones you want using display: none;

Example: You have a block that you want one step lower on mobile. Duplicate it, put it where it would be on mobile, then hide it on the desktop version, but leave it visible on the mobile version vice versa.

You can use "@media only screen and (max-width:768px) { your CSS here }" to change stuff only on mobile devices.

This method will affect your page load time tho. It might also affect your SEO if you duplicate stuff that contains h1 tags or image alt data.

Hi @BrandonW

I am sorry you must be sick of this! But I'd reaaaally appreciate it if you could have a look at my site? I am creating a site for an Omani Women's charity and I'm experiencing the same problem.

https://sim-zuk-7r39.squarespace.com/our-objectives-a/

It's in Arabic and Arabic reads Right-To-Left. So on desktop text box number 1 has to be on the right hand side whilst number 2 on the left and so on... This is fine for the desktop version, but on mobile it stacks it up and orders it in a way that doesn't make sense anymore (2,1,4,3,6,5).

Thank you sooooo much in advanceSim

Hello @Brandon@, where did you insert this code?

Hi @BrandonW I would love some help with the stacking on my site! I tried to create a new question but for some reason it won't let me tag you. Can you please help me?

I need to customize the stacking on my website: https://whitney-luckett-amak.squarespace.com

As of right now the layout is just the way I want it:

Image Text Text Image Image Text Text Image

But on mobile its:

Image Text TextImage Image Text TextImage

Is there a way or code to re-stack the blocks to:

Image Text Image Text Image Text Image Text

Thank you in advance!!!

Kat

Hey @BrandonW ! I'm new to SquareSpace and have this exact same problem. My website is informd.co.in. Tried tweaking your code but it doesn't work for me. Can you please help me out?

Hi!

I think I have the same problem

I really need help with the website: https://www.drzelinamedina.com

On the homepage of the website in desktop view you can see that the images are in Grid layout.

and in the mobile view is in a stack layout.

The Desktop view Layout right now is really good, so I don't really want to change it which is:

  Quote

 

<Picture 1>     <Picture 2>    <Picture 3>

<Picture 4>    <Picture 5>    <Picture 6>

<Picture 7>    <Picture 8>    <Picture 9>

<Picture 10>  <Picture 11>  <Picture 12>

 

Expand  

Preferably  would like my mobile view to be

  Quote

<Picture 1>

<Picture 2>

<Picture 3>

<Picture 4>

<Picture 5>

<Picture 6>

<Picture 7>

<Picture 8>

<Picture 9>

<Picture 10>

<Picture 11>

<Picture 12>

But squarespace arange the mobile view  like this:

  Quote

 

<Picture 1>        

<Picture 4>       

<Picture 7>     

<Picture 10>   

<Picture 2>

<Picture 5>

<Picture 8> 

<Picture 11>

<Picture 3>

<Picture 6>

<Picture 9>

<Picture 12>

 

Expand  

Is there CSS or code to rearrange the pictures?

I hope this is possible. Thank you in advance

On 2/22/2021 at 9:21 PM, Mie_MIe said:

Hi!

I think I have the same problem

I really need help with the website: https://www.drzelinamedina.com

On the homepage of the website in desktop view you can see that the images are in Grid layout.

and in the mobile view is in a stack layout.

 

The Desktop view Layout right now is really good, so I don't really want to change it which is:

  Quote

 

<Picture 1>     <Picture 2>    <Picture 3>

<Picture 4>    <Picture 5>    <Picture 6>

<Picture 7>    <Picture 8>    <Picture 9>

<Picture 10>  <Picture 11>  <Picture 12>

 

Expand  

 

Preferably  would like my mobile view to be

 

  Quote

<Picture 1>

<Picture 2>

<Picture 3>

<Picture 4>

<Picture 5>

<Picture 6>

<Picture 7>

<Picture 8>

<Picture 9>

<Picture 10>

<Picture 11>

<Picture 12>

 

But squarespace arange the mobile view  like this:

  Quote

 

<Picture 1>        

<Picture 4>       

<Picture 7>     

<Picture 10>   

<Picture 2>

<Picture 5>

<Picture 8> 

<Picture 11>

<Picture 3>

<Picture 6>

<Picture 9>

<Picture 12>

 

Expand  

Is there CSS or code to rearrange the pictures?

I hope this is possible. Thank you in advance

Hi,

This is popular question. Here this the solution

Add Image 1, 2, 3

Add a Line Block

Add Image 4, 5, 6

Add a Line Block

....

Remove all Line Blocks.

@tuanphan - you always have the right answer. I'm always amazed at how your answer is always what I'm looking for. Maybe this is not true for everyone, but if I'm in a forum's question and you have commented on it I don't even bother looking at anyone else's comments. Thanks @tuanphan!

On 4/8/2021 at 10:55 PM, frameids said:

@tuanphan - you always have the right answer. I'm always amazed at how your answer is always what I'm looking for. Maybe this is not true for everyone, but if I'm in a forum's question and you have commented on it I don't even bother looking at anyone else's comments. Thanks @tuanphan!

Have you solved your problem yet?

Hi! I hope this is the right place to share my question - I think it relates to this feed. Is there a way to get the mobile view for my site to show up the same as on desktop?

So, Image #1, Text #1, Button #1, Image #2, Text #2, Button #2...etc?

Right now all images are stacking together, then all text, then all buttons.

I've attached images of what I want (but in mobile view) vs. what I'm getting. 

@tuanphan - it sees like you may be able to help?