Reorder blocks in mobile view and aligning text vertically to an image

Site URL: https://www.dianatantillo.net/storyboards

Hello, 

I know I have seen the comment of reordering blocks on mobile and I have tried a few of the solutions offered, but I just don't know what I'm doing wrong. I have on desktop:

[gallery] [text]
[text] [gallery]

And for mobile I want the image gallery to be above the text, but no matter what I try it doesn't seem to do it. 

I want

My other question has to do with aligning vertically text. I would like the text next to these gallery block to be centered with them. What I have right now I did with spacers, but the smaller the screen the lower the text gets because of the spacers.

The page in question is this one specifically: https://www.dianatantillo.net/storyboards

On 4/15/2021 at 10:41 AM, tuanphan said:

Q2. It looks like you solved?

Q2. To reorder, add this to Design > Custom CSS

/* gallery text gallery text */
@media screen and (max-width:767px) {
div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(3), div#page-5a6211a29140b79a6ad6d67e .span-12>.row:nth-child(5) {
    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;
}
}

 

This worked! Thank you! I just had to change the nth-child numbers to be even numbers instead. But this worked! Thank you so much!!

On 4/22/2021 at 9:28 PM, mellowyellowsocks said:

This worked! Thank you! I just had to change the nth-child numbers to be even numbers instead. But this worked! Thank you so much!!

Do you want to fix these?

Site URL: https://www.dianatantillo.net/

1. (Tablet-Animation) Header overlap banner

2. (Overlay Menu) Change branding arrow to yellow?

3. (Mobile-Storyboarding) Make image fullsize?

4. (Mobile-Maria Comic) Add a space above text?

5. (Overlay Menu) Align email icon – about item?