Switching the order of blocks for mobile

@tuanphan sure! what's your info?

On 8/21/2021 at 7:28 AM, oldegray said:

@tuanphan sure! what's your info?

Hi, What is infor?

Dear community. I would like to bring the marked text (see screenshot) to between two images in mobile. TIA for your help 🙏
link: https://www.uxbyshirley.com/mywordv3-2

17 hours ago, ShirleyFromBerlin said:

Dear community. I would like to bring the marked text (see screenshot) to between two images in mobile. TIA for your help 🙏
link: https://www.uxbyshirley.com/mywordv3-2

You need to drag a layout a bit

Hover on I knew nothing text >> Drag it under eye icon >> So that you see a horizontal line appear, with its width equal to the width of the eye.

Do similar with another text.

Then save & check again on mobile

6 hours ago, tuanphan said:

You need to drag a layout a bit

Hover on I knew nothing text >> Drag it under eye icon >> So that you see a horizontal line appear, with its width equal to the width of the eye.

Do similar with another text.

Then save & check again on mobile

Ahh I missed the blue line.. 🙈 Problem solved. Thank you so much!

Hey I've searched everywhere on the internet for a solution for this. I still can't figure out how to rearrange a couple blocks. I've been using: 

@media screen and (max-width: 750px){
  div#block-yui_3_17_2_1_1645213455198_21570+.row{
    display: flex !important;
   flex-direction: column-reverse !important;
  }
}

And about a million variations of it to no avail. 

The page is https://www.moment.film/pickford

And I'm trying to swap #block-a28565a9555108ed3c31 and #block-aec76ae465057b81f95d on mobile. Any help is greatly appreciated. 

On 2/19/2022 at 8:15 AM, JulienScherliss said:

Hey I've searched everywhere on the internet for a solution for this. I still can't figure out how to rearrange a couple blocks. I've been using: 

@media screen and (max-width: 750px){
  div#block-yui_3_17_2_1_1645213455198_21570+.row{
    display: flex !important;
   flex-direction: column-reverse !important;
  }
}

And about a million variations of it to no avail. 

The page is https://www.moment.film/pickford

And I'm trying to swap #block-a28565a9555108ed3c31 and #block-aec76ae465057b81f95d on mobile. Any help is greatly appreciated. 

Which block you want to change order, can you take a screenshot?

Hi @tuanphan,

I'm having a similar problem on our team page on mobile (right now it's displayed as image/text/text/image instead of image/text/image/text and so on). Could you please take a look when you have a minute?

sensus.team/people pw: sensus2022

Thanks!

12 hours ago, barbudo said:

Hi @tuanphan,

I'm having a similar problem on our team page on mobile (right now it's displayed as image/text/text/image instead of image/text/image/text and so on). Could you please take a look when you have a minute?

sensus.team/people pw: sensus2022

Thanks!

Add to Design > Custom CSS

/* Team Page - Mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1632282270233_43075+.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-605beb3884f60024919d1a72>.row:nth-child(4) {
    display: flex;
    flex-direction: column-reverse;
}}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

Thank you!!

@tuanphan

I'm trying to switch the text and button on mobile so that the text is above the button. It's in the "Interested in a workshop section" above the footer. This is the code I'm using -

site: https://helicon-rhombus-bxjl.squarespace.com/about

pw is camp

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

17 hours ago, webdesign1234 said:

@tuanphan

I'm trying to switch the text and button on mobile so that the text is above the button. It's in the "Interested in a workshop section" above the footer. This is the code I'm using -

site: https://helicon-rhombus-bxjl.squarespace.com/about

pw is camp

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

Add to Design > Custom CSS

/* Mobile Bootcamp button */
@media screen and (max-width:767px) {
div#page-section-62cf3a5a0da0df54ceb2f6ed .span-12 {
    display: flex;
    flex-direction: column-reverse;
}
}

@tuanphan That worked - thanks so much!