Avenue: Change block order on mobile?

Hi!

I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached).

When viewed on a mobile device, the image comes first, with the text below (see "D", attached).

I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below.

How can I do this?

Thank you!

@cakalak Can you share link to your site?

Hi tuanphan!

https://www.lawrence.kim/118-118-money-credit-card-design

I'd like to have the title and body text at the top of the page in mobile view, followed by the illustration of the card.

Thank you!

16 minutes ago, cakalak said:

Hi tuanphan!

https://www.lawrence.kim/118-118-money-credit-card-design

I'd like to have the title and body text at the top of the page in mobile view, followed by the illustration of the card.

Thank you!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5dc48a5090367c2c43071590>.row.sqs-row {
    display: flex;
    flex-direction: column-reverse;
}
}

Thank you, @tuanphan!

Hi @tuanphan

I'm trying to figure out how I can amend the code to my site - https://www.jbs-roundbridge.co.uk/location

I'm trying to reorder the text "Swing into country living" to be before the golf images on mobile. Currently, on mobile the golf images are first. 

I've attached the browser layout which is fine, but the mobile layout needs reordering just for this bit of text and images. 

Please help.  

1 hour ago, Carrrrl said:

 

 

 

What is access password?

Hi @tuanphan

I dont know the password as its a company site. 
It uses the Brine template - not sure if that helps. 

5 minutes ago, Carrrrl said:

Hi @tuanphan

I dont know the password as its a company site. 
It uses the Brine template - not sure if that helps. 

 

https://beaverhero.com/squarespace-how-to/#How_to_Setup_Password_Share_Site_URL

@tuanphan Oh sorry - its 123Fore!5 

1 minute ago, Carrrrl said:

@tuanphan Oh sorry - its 123Fore!5 

Difficult!

try adding this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5dcd77fca638e247e615eda1>.row:last-child .col>.row:nth-child(2) {
    flex-direction: column-reverse;
    display: flex;
}
}

@tuanphan - You are a legend. Thank you so much.  Really - thank you - its been racking my brain for hours

@tuanphan -I have a question about how you target the row. So I have a hopscotch situation and am anticipating that I have to target each individual one. How do I find the ID that isn't YUI? or is there a way to flip the order of the text and image on only the odd rows?

the use cases section of the homepage 

https://lettuce-grapefruit-bdsr.squarespace.com/ 

pswd: socialive

2 hours ago, AThompson_social said:

@tuanphan -I have a question about how you target the row. So I have a hopscotch situation and am anticipating that I have to target each individual one. How do I find the ID that isn't YUI? or is there a way to flip the order of the text and image on only the odd rows?

the use cases section of the homepage 

https://lettuce-grapefruit-bdsr.squarespace.com/ 

pswd: socialive

https://beaverhero.com/squarespace-how-to/#How_to_find_Block_ID

Hey @tuanphan !

Any interest in helping me reorder the steps for mobile at https://milkandhannahphoto.com/new-page 

I've been hunting for help and can't find anything except this thread.

Thank you so much!

4 hours ago, milkandhannah said:

Hey @tuanphan !

Any interest in helping me reorder the steps for mobile at https://milkandhannahphoto.com/new-page

I've been hunting for help and can't find anything except this thread.

 

Thank you so much!

page not found

5 hours ago, tuanphan said:

page not found

@tuanphan sorry about that! 

https://milkandhannahphoto.com/process 

On 1/18/2020 at 10:29 PM, milkandhannah said:

@tuanphan sorry about that! 

https://milkandhannahphoto.com/process 

Sorry, I'll off forum in the next 2 weeks for LUnar New Year.

Will check later. Or you can also send to my email in signature. 

On 11/25/2019 at 4:03 PM, tuanphan said:

Difficult!

try adding this code to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5dcd77fca638e247e615eda1>.row:last-child .col>.row:nth-child(2) {
    flex-direction: column-reverse;
    display: flex;
}
}

 

Hey Tuanphan not sure if this thread is still active but you seem to be the man when it comes to re-ordering blocks on mobile!

I'm trying to change the order of how sub-headers and body copy appears on mobile on the 'website design package' page (ironically!). How do I switch the order to it appears in the right sequence? 

12 minutes ago, Mum-Folk said:

Hey Tuanphan not sure if this thread is still active but you seem to be the man when it comes to re-ordering blocks on mobile!

I'm trying to change the order of how sub-headers and body copy appears on mobile on the 'website design package' page (ironically!). How do I switch the order to it appears in the right sequence? 

 

 

This does not need custom code. Try below, if you do not understand what I say, I will find an article on the Squarespace Support page (otherwise I will make a short guide)

When you type the first 3 texts: The process, planning + design, delivrables.

Insert a Line Block under.

Then insert the next text, so that they are above the Line

--

11 minutes ago, tuanphan said:

This does not need custom code. Try below, if you do not understand what I say, I will find an article on the Squarespace Support page (otherwise I will make a short guide)

When you type the first 3 texts: The process, planning + design, delivrables.

Insert a Line Block under.

Then insert the next text, so that they are above the Line

--

thanks so much for the speedy reply tuanphan! I'm not sure I understand sorry - I would prefer not to have a line divider under the subheaders if possible? Do you have a link or any more info on how to do this? Thanks again, you've been such a massive help!

2 minutes ago, Mum-Folk said:

thanks so much for the speedy reply tuanphan! I'm not sure I understand sorry - I would prefer not to have a line divider under the subheaders if possible? Do you have a link or any more info on how to do this? Thanks again, you've been such a massive help!

You can add Line Block, then when you're done text, you can remove later.

Your text is in 2 different rows, so when you stack on mobile, you'll see the order is incorrect. Add a Line Block, just so you can put all the text in one row, you can delete it after you've finished the text

4 minutes ago, tuanphan said:

You can add Line Block, then when you're done text, you can remove later.

Your text is in 2 different rows, so when you stack on mobile, you'll see the order is incorrect. Add a Line Block, just so you can put all the text in one row, you can delete it after you've finished the text

But I want the information to stack in columns left to right - so subheader, text , button (left column), subheader, corresponding text ( middle column), subheader, corresponding text ( right column) - not sure how the above helps me do this?

3 minutes ago, Mum-Folk said:

But I want the information to stack in columns left to right - so subheader, text , button (left column), subheader, corresponding text ( middle column), subheader, corresponding text ( right column) - not sure how the above helps me do this?

use this https://support.squarespace.com/hc/en-us/articles/205815288-Page-and-block-layout-changes-on-mobile-devices#toc-multiple-even-columns-in-mobile-view

@tuanphan I love my design on desktop but when I resize to mobile, all of my items stack incorrectly. I tried to use the Squarespace support page and align them differently but I am still getting the same issue. It seems squarespace is stacking everything that appears on the left column first, then the right column whereas I would like the items that are horizontally aligned on desktop to stack below each other on mobile.

Is there any custom code to re-order the arrangement of these items? 

Site Link: https://www.potionsnmotions.com/products