Reorder blocks on mobile

Site URL: https://carolyn-lykkemark-voice.squarespace.com/voice-lessons

Password: sing

Can anyone help me with some code? I'm using spacers to create a cool ripple effect on desktop, but on mobile, the images are showing up in the wrong order. I've tried targeting with css and can only get it to work if I use section ids, which won't work for this set up with the collage/rippled effect instead of straight columns as I can't put them in different sections and get the result I want.

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

And then in the next image section to go "now you're discourage"/"Yet you yearn"/

Thank so much for your help!

On 11/13/2021 at 4:20 AM, angelaw said:

Site URL: https://carolyn-lykkemark-voice.squarespace.com/voice-lessons

Password: sing

Can anyone help me with some code? I'm using spacers to create a cool ripple effect on desktop, but on mobile, the images are showing up in the wrong order. I've tried targeting with css and can only get it to work if I use section ids, which won't work for this set up with the collage/rippled effect instead of straight columns as I can't put them in different sections and get the result I want.

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

And then in the next image section to go "now you're discourage"/"Yet you yearn"/

Thank so much for your help!

Try adding to your Home > Design > Custom Css

#page-section-612fcc9cba09711c67c04f03  .row > .col > .row {
  display: flex;
  flex-direction: column;
}

#page-section-612fcc9cba09711c67c04f03  .row > .col > .row > .span-6:first-child {
  order:2;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

@bangank36, thank you!  Unfortunately, it didn't work at all...

@angelaw I just solved a similar case.

With this section

I'd like the images/text in the top to go "loud, strong, free"/"you're frustrated"/"you want to..."

Our approach is add one more section under current section, with order what you want, then we will give the code to 

• hide new section on desktop - show it on mobile only
• hide current section on mobile - show it on desktop only