Change block sequence for 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 informd.co.in or informd.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!

I have been searching for a solution to this for a long time, only you articulate the issue much nicer. I just posted a question about it.

Thank you! If I find an answer I will post for sure.

@swayy @yashlunagaria Seems problem has been resolved?

@tuanphan I switched the desktop format to have all images on the left side so that the stacking wouldn't affect the mobile site.

The first image is how I want my desktop site to look. However, that makes the mobile block order go ----> image, text, text, image, image, text, text, image, image, text. Can you please help me with the CSS code that would correct this in the mobile view?

@yashlunagaria What page do you say?

On 6/12/2020 at 6:06 AM, markjjeffries said:

Hi Tuanphan,

I have an issue with text blocks/images swapping position on mobiles, exactly like the above problem. Is there any chance you can help me out too? My site is here and the issue is occurring on the 'About' and 'How I Work' pages (I'm sure you'll see where as soon as you look at the pages).

Many thanks,

Mark

Can you share access password?

With about page add to Home >D esign > custom CSS

@media screen and (max-width:767px) {
div#page-section-5ed56085606c68215b5a9d32 .span-12>.row, div#page-section-5ed55b94a22a3463f7510577>.row {
    display: flex;
    flex-direction: column-reverse;
}

}

Where is how i work page?

Hi Tuanphan,

Thank you for the quick reply and code but I need the images above the text. Apologies, I should've been more clear.

Also, the 'How I Work' page is nested under 'Work With Me'. I need the photo at the top above the accompanying copy ("Have you been everywhere...") as well as the three photos at the bottom to sit above their respective text (leaves photo above "Knowing the root cause", smoothie photo above "Cleanse to heal" and salad photo above "Autoimmune confusion").

Thank you again.

48 minutes ago, markjjeffries said:

Hi Tuanphan,

Thank you for the quick reply and code but I need the images above the text. Apologies, I should've been more clear.

Also, the 'How I Work' page is nested under 'Work With Me'. I need the photo at the top above the accompanying copy ("Have you been everywhere...") as well as the three photos at the bottom to sit above their respective text (leaves photo above "Knowing the root cause", smoothie photo above "Cleanse to heal" and salad photo above "Autoimmune confusion").

Thank you again.

What is access password?

RORpassword123!

On 6/16/2020 at 9:06 PM, markjjeffries said:

RORpassword123!

Hi. Sorry for the late reply.

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5ecd9b853bbee218ed13153f>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* how i work */
div#page-section-5ec5b0227245c9582361bb23>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

With 3 images, code can't solve this, you need to adjust layout a bit.

Thank you Tuanphan. That's the 'How I Work' page sorted.

Is it possible for you to provide code for a further two changes?

1. On the 'Home' page, I'd like the circle image of the lady placed above the text ('Welcome! I'm Rebecca...").

2. On the 'About' page, I'd like the 4 circular images above their accompanying text, so:

Road image
"The Journey..."
Tree image
"The Why..."
Flower image
"From Sickness..."
Lady at desk image
"Professional..."
Button

Many thanks!

14 hours ago, markjjeffries said:

Thank you Tuanphan. That's the 'How I Work' page sorted.

Is it possible for you to provide code for a further two changes?

1. On the 'Home' page, I'd like the circle image of the lady placed above the text ('Welcome! I'm Rebecca...").

2. On the 'About' page, I'd like the 4 circular images above their accompanying text, so:

Road image
"The Journey..."
Tree image
"The Why..."
Flower image
"From Sickness..."
Lady at desk image
"Professional..."
Button

Many thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* home */
div#page-section-5ecd9b853bbee218ed13153f>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* About - Road */
div#page-section-5ed561f6bd9be315e06be350>.row>.span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* about - the why */
div#page-section-5ed56085606c68215b5a9d32 .span-12>.row {
    display: flex;
    flex-direction: column;
}
/* about - from sickness */
div#page-section-5ed55eb4d34ef03cd3be5ae6 .span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
/* about - book a consulation */
div#page-section-5ed55b94a22a3463f7510577>.row {
    display: flex;
    flex-direction: column;
}
}

Tuanphan, thank you so much. You're a true player.

@tuanphan I'm also having a similar issue on two pages. I'm wanting to swap blocks on mobile for patrickgarr.com/coaching and patrickgarr.com/masterclasses under the tabs so that the image stacks on top of the text for each on mobile. Is there a way to do this? Thank you for all of your help! 

13 hours ago, pgcreativedesigns said:

@tuanphan I'm also having a similar issue on two pages. I'm wanting to swap blocks on mobile for patrickgarr.com/coaching and patrickgarr.com/masterclasses under the tabs so that the image stacks on top of the text for each on mobile. Is there a way to do this? Thank you for all of your help! 

Add to Design > Custom CSS

/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

On 4/17/2021 at 4:46 AM, tuanphan said:

Add to Design > Custom CSS

/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

@tuanphan This worked PERFECTLY! Thank you tremendously for your help!

On 4/17/2021 at 4:46 AM, tuanphan said:

Add to Design > Custom CSS

/* Coaching order mobile */
@media screen and (max-width:767px) {
div#sqpl-tab-group-0 .sqpl-tab-content .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

On 5/9/2021 at 12:20 PM, pgcreativedesigns said:

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

If anyone has insight on this, I'd love any tips! I still haven't found a solution just yet. Thanks for any and all advice!

On 5/9/2021 at 11:20 PM, pgcreativedesigns said:

Hi @tuanphan! Is there any easy way to also do this on this page (https://www.patrickgarr.com/coach under offerings) to keep the desktop order of icons on mobile? And also here (https://www.patrickgarr.com/masterclasses under bootcamp) to keep the numbering in order for mobile? 

I also had this issue with image icons under a member area (trying to keep them in correct sequence of weeks on mobile). Is there any easy way to adjust this code for different sections?

Thank you TREMENDOUSLY for any and all advice! 

PG

Add to Design > Custom CSS (for Coach)

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

If it works, I will check another page

19 hours ago, tuanphan said:

Add to Design > Custom CSS (for Coach)

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

If it works, I will check another page

@tuanphan this worked PERFECTLY! Thank you. I would love to also fix it on the masterclass page. Let me know if there's a good way to do it there also. 

@tuanphan Hi I have a similar problem too for the mobile view. For my desktop view, I would like to have one image at left and one image at right. But when I switch to the mobile view, the order is wrong and I would like to have each  picture on top of their intro text. Could you help me fix the mobile view. Thank you! 

my site is shuqi-yang.squarespace.com

On 5/18/2021 at 1:40 AM, 777777qi said:

@tuanphan Hi I have a similar problem too for the mobile view. For my desktop view, I would like to have one image at left and one image at right. But when I switch to the mobile view, the order is wrong and I would like to have each  picture on top of their intro text. Could you help me fix the mobile view. Thank you! 

my site is shuqi-yang.squarespace.com

 

Add to Design > Custom CSS

/* Mobile-Home-Text image order */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1621237888199_46996+.row, div#block-yui_3_17_2_1_1621241185564_32140+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

}

Hi @tuanphan

I'm a huge fan of yours! I find your comments reliable and helpful, especially for a beginner like me. I really need your help.

I have a similar issue from my website as well.

Website URL: https://www.coachcourtney.net/

From the Footer, the social media icons are arranged this way:

But on the mobile version, the icons looked like this:

Is there any way for the social media icons from the mobile version arranged just like from the dekstop version? Like this way, I think?

Also, it is possible to align the icons from the desktop version in the text below? And align the right section as well?

For the mobile version, is it possible to move the texts to the center? 

Thank you. I hope you'll be able to read my comment though.