Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 Swap block order on mobile


Mariamabda

Question

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.

Websitehttps://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!
 

Screen Shot 2020-07-30 at 11.39.48.jpg

Screen Shot 2020-07-30 at 11.39.59.jpg

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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-dir

Posted Images

9 answers to this question

Recommended Posts

  • 0

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!

Link to post
  • 0
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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


 

CleanShot 2020-10-06 at 16.12.27@2x.png

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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

WC holding mobile.jpg

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...