7.1 Swap block order on mobile

Site URL: https://entrenosotros.just-america.com/02-2020-actividades

Hi!

I would like to change blocks order on mobile. On desktop the image is on the left and text on the right and that's ok but on mobile I would like the text first and the image below.

Website: https://entrenosotros.just-america.com/02-2020-actividades
Pass: test
Section I would like to change: section[data-section-id="5f22d4ae41363b1aac10c22a"]

Thank you very much in advanced!
 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* swap block order */
div#page-section-5f22d4ae41363b1aac10c22a .span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

Thank you very much! It worked perfectly!

Just one more question. I will need to do it on another sections but it doesn't work just by changing the section number. I guess I should also change  something in ".span-12>.row". Is that correct? Is there a way I can do it without bothering you everytime? Thanks again!

Just now, Mariamabda said:

Thank you very much! It worked perfectly!

Just one more question. I will need to do it on another sections but it doesn't work just by changing the section number. I guess I should also change  something in ".span-12>.row". Is that correct? Is there a way I can do it without bothering you everytime? Thanks again!

Each section needs different code. and it seems they don't have a specific rule

Hi @tuanphan - is there any way to change the order of entire sections on mobile (not just change the order of the blocks within a section)?

I'm trying to achieve the same thing as above, but i have images in a separate section to the corresponding text so trying to change the order to ensure that when it stacks on mobile, it goes...

image 
Text
Image
Text


At the moment, it goes..

Image
text
text
Image
Image
text

Thanks in advance,

Jon


 

16 hours ago, Hubbl_Marketing said:

Hi @tuanphan - is there any way to change the order of entire sections on mobile (not just change the order of the blocks within a section)?

I'm trying to achieve the same thing as above, but i have images in a separate section to the corresponding text so trying to change the order to ensure that when it stacks on mobile, it goes...

image 
Text
Image
Text


At the moment, it goes..

 

Image
text
text
Image
Image
text

 

Thanks in advance,

Jon

if anyone in future interested this, please share site url, we can help easier.

Hello @tuanphan

I have seen your replies on other threads relating to this subject & was wondering if you would be so kind as to help me too? :)

I'm trying to reorder blocks on mobile for this website/landing page - 

https://raspberry-sparrow-b9el.squarespace.com/
pw - wc2020

Basically I need the logo block to show at the top of the page above the pig on mobile if possible? I've tried variations of the code you have provided but I can't seem to get it to work.

I would be eternally grateful if you could give me a steer?

Thanks & best wishes,

Marie

23 hours ago, marie.dilworth said:

Hello @tuanphan

I have seen your replies on other threads relating to this subject & was wondering if you would be so kind as to help me too? :)

I'm trying to reorder blocks on mobile for this website/landing page - 

https://raspberry-sparrow-b9el.squarespace.com/
pw - wc2020

Basically I need the logo block to show at the top of the page above the pig on mobile if possible? I've tried variations of the code you have provided but I can't seem to get it to work.

I would be eternally grateful if you could give me a steer?

Thanks & best wishes,

Marie

Add to Home > Design > Custom CSS

/* Swap text image */
@media screen and (max-width:767px) {
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) {
    display: flex;
    flex-direction: column;
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-2:nth-child(3) {
    order: 1;
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-3 {
    order: 2;
}

element.style {
}
div#page-section-5f7cfa213b3c674449b35565>.row:nth-child(2) .span-4 {
    order: 3;
}
}

 @tuanphan

That's awesome, thank you so so much!

Best wishes,
Marie

@gsheldon11 Edit your page. Click and drag near the left edge of your text block and drag to the right side of your image block until you see a guideline appear to the right of the image block, then let go.

Don't be afraid to experiment. If things get messed up, hover over Done in the upper left corner and select Discard Changes and try again.

Please see Moving blocks to customize layouts.

Let us know how it goes.

Would you mind helping me with the same thing?

https://www.popoutadventures.ca/about Pin:7897.

• Need to swap image #2 with "our mission" copy 

Can't seem to find page section IDs; only data IDs.

Thank you!!

@POA

Add the following to Design > Custom CSS.

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

  [data-section-id="6031a131b065b425a5cbcdc5"] .sqs-row .sqs-row:nth-child( 3 ) {
  
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for a v7.1 site and specific to POA's needs.

Let us know how it goes.

Thanks again, @creedon!

Worked perfectly.

@creedon Can you help with ordering multiple images in one section. 

Desktop view: 

Image 1 - Image 2 , Image 3 

Image 4 , Image 5 , Image 6 

Mobile currently goes 

Image 1 

Image 4 

Image 2 

Image 5 

Image 3

Image 6 

Want it to go 

Image 1 

Image 2 

Image 3 

Image 4 

Image 5 

Image 6

https://chrisfowke.squarespace.com/

pw: aloha

@JustinSeimits

Your issue is that your images are laid out in 3 columns. You are going to want two rows.

With 3 columns on mobile the second column slides under the first and the third under the second. Hence the undesirable order.

One way to get two row is to first create a line block above your images. It will need to be the full length of the page width.

Move the first 3 images above line.

One you have two rows with the help of the line block. Remove the line block and save.

Hopefully you've created two rows and now things will look OK on mobile.

Let us know how it goes.

Not following you with this. The layout needs to stay the same, if I add a line block and delete it what does that do? Can you provide more clarity with this. Thank you for your help.

@JustinSeimits

The lay out will be the same visually, i.e. the order of the images. The line keeps you from accidentally creating columns. It can be done without the line but you have to be hyper aware of the insertion lines.

@creedon I got it to work, thank you very much for your help. What a weird bug.

Hello @tuanphan, I'm trying to do something similar. Can you help, please?

https://lemon-cranberry-x99z.squarespace.com/sequence-photography-moving-the-weasel

On 4/8/2021 at 11:58 PM, Kitley said:

Hello @tuanphan, I'm trying to do something similar. Can you help, please?

 

https://lemon-cranberry-x99z.squarespace.com/sequence-photography-moving-the-weasel

Hi. It looks like you solved this?

Hi @tuanphan, 

I also try to re-organise my images, 

https://www.contretype.org/liste-expos

the reading direction is from left to right on the website and from column to column on mobile. Is it possible to put the same direction of display on mobile with 4 column ?

sorry for my bad english 

thx anyway :)

woogie 

or @creedon  can you help me ? 

already thanks 

On 5/19/2021 at 9:26 PM, wogie36 said:

Hi @tuanphan, 

I also try to re-organise my images, 

https://www.contretype.org/liste-expos

the reading direction is from left to right on the website and from column to column on mobile. Is it possible to put the same direction of display on mobile with 4 column ?

 

sorry for my bad english 

thx anyway :)

woogie 

 

Hi. Do/will you use Personal or Business or Commerce Plan? 

Sorry for the late reply 

Im in a business plan.

23 hours ago, wogie36 said:

Sorry for the late reply 

Im in a business plan.

You want this direction?