Change order of text and image when viewing on mobile

Site URL: https://crocodile-teal-gdz6.squarespace.com/origins

Hi, I would like to reverse the order of the text and image when viewed on mobile for the section in the attached screenshot. The image needs to sit at the base of the section when viewed on mobile.

Any help would be much appreciated,

Thanks
Chris

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-fa200b1ab6a1b52e8c51 figure {
    display: flex;
    flex-direction: column-reverse;
}
}

Thanks, @tuanphan that worked!

Hi @tuanphan - I am attempting to do something similar but instead have the image appear on top in mobile since I have more text - https://www.partumhealth.com/ - I attempted to paste in the code above under Design> Custom CSS but that did not seem to work. Any insight would be much appreciated! 

PS total novice here. Thanks in advance!

On 3/2/2022 at 11:25 AM, MD1210 said:

Hi @tuanphan - I am attempting to do something similar but instead have the image appear on top in mobile since I have more text - https://www.partumhealth.com/ - I attempted to paste in the code above under Design> Custom CSS but that did not seem to work. Any insight would be much appreciated! 

PS total novice here. Thanks in advance!

Add to Design > Custom CSS

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

Hi @tuanphan! I have tried entering the code for my mobile view and am having trouble. On the About page mobile view, I would like Amina's picture to come before the narrative about her.  Website is https://brass-koi-pm95.squarespace.com/ and password is Vermont

On 2/3/2024 at 4:48 AM, laurasharp said:

Hi @tuanphan! I have tried entering the code for my mobile view and am having trouble. On the About page mobile view, I would like Amina's picture to come before the narrative about her.  Website is https://brass-koi-pm95.squarespace.com/ and password is Vermont

Solved via email.

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1706646947586_109917+.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
    }
}