Change block order in mobile

it is okay for you it seems problem has been solved.

purenetworth

Hi @tuanphan,

I'm on the struggle with this too. My blocks on desktop are side by side image then text and in mobile they are resorted all 3 images on top and all 3 text blocks on bottom. I need mobile view to be image - text - image - text

Website is: www.southersunevents.com

Password: sse2020

On 2/12/2021 at 1:43 AM, SouthernSunEvents said:

Hi @tuanphan,

I'm on the struggle with this too. My blocks on desktop are side by side image then text and in mobile they are resorted all 3 images on top and all 3 text blocks on bottom. I need mobile view to be image - text - image - text

Website is: www.southersunevents.com

Password: sse2020

Add Image - Text

Add a Line Block

Add Image - Text

Add a Line Block

Add Image - Text

Remove all Line Blocks

Then check your site on mobile

On 2/14/2021 at 6:30 AM, tuanphan said:

Add Image - Text

Add a Line Block

Add Image - Text

Add a Line Block

Add Image - Text

Remove all Line Blocks

Then check your site on mobile

This is perfect. Thank you!

I have a similar problem to this.

Site - https://ioniannannies.squarespace.com/ - Password 'ioniannannies21'.

I would like to change the order of the images on mobile on the homepage.

I would like to move the blocks so this is their order:

IMAGE
About Us Text.
Text.
Button.

And so on and so on. Any help with the code will be appreciated.

Thanks.

@whoshenry

Add the following to Design > Custom CSS.

/* make image block inline text left/image right, image top/text bottom on mobile */

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

  [data-section-id="6051f281305a1f21c2b777ba"] .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 4n+1 ) {
  
    background-color : blue !important;
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

On 3/26/2021 at 1:48 AM, creedon said:

@whoshenry

Add the following to Design > Custom CSS.

/* make image block inline text left/image right, image top/text bottom on mobile */

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

  [data-section-id="6051f281305a1f21c2b777ba"] .sqs-grid-12 > .sqs-row > .sqs-col-12 > .sqs-row:nth-child( 4n+1 ) {
  
    background-color : blue !important;
    display : flex;
    flex-direction : column-reverse;
    
    }
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

This works perfectly, thank you very much for your help. Greatly appreciated.

Thanks.

Hi @tuanphan,

I'm having an issue identifying the target for this code in reference to an index page. I need to switch the order of blocks on mobile for one section of the index page on this site: https://erin-medine.com/home.

I need it to go 

1.picture of leaf

2.my wishlist

3.picture of blonde girl

4.Faq and etiquette

thanks for any help!

On 5/12/2021 at 2:16 AM, erin2 said:

Hi @tuanphan,

I'm having an issue identifying the target for this code in reference to an index page. I need to switch the order of blocks on mobile for one section of the index page on this site: https://erin-medine.com/home.

I need it to go 

1.picture of leaf

2.my wishlist

3.picture of blonde girl

4.Faq and etiquette

 

thanks for any help!

Can you check site url?

@tuanphan thanks for the response; I got this figured out.