Can anyone help me with responsive edits to by Landing Page?

[GidonJ]

Hi guys,

Can anyone assist me to change the stacking order on this minisite so that the form appears below the banner + main text? https://landing.covercy.com/agent_ms_home

Currently, when viewed by mobile, reaching the form requiers quite a lot of scrolling. 

One solution woud be to move the form to the left of the template, but then it wouldnt be intuitive. 

Thanks

Gidon

[CSilva2]

Hi,

I have a section in particular that I want to add exactly this code so that on mobile the columns appear inverted. But the question is, where do I insert this code since in Design Manager I don't have access to the sections...

Thanks!

[Anonymous · Accepted solution]

Hi @GidonJ and @jzimmermann,

You can use this styling for making the right column come first in mobile

@media (max-width:767px){

.stack-row > .row-fluid-wrapper > .row-fluid {
    display: flex;
    flex-direction: column-reverse;
}

/* .stack-row is the parent class */

}

@GidonJ I checked the page and issue is solved now. If you want to style it anywhere without using float, you can follow the above code.

[Hollyce]

YAY great simple solution. Thanks!

[roisinkirby]

Hello @GidonJ I took a look at your site, and it looks as if this has been acheived - am I correct in this assumption? If you're still stuck / require help let me know and I'd be happy to connect you with one of our experts. 

[jzimmermann]

Hi Róisín! 

I'm actually creating a page and wondering the same thing here myself. Do you happen to have any insight you'd be able to share? 

I've actually created a separate post for this here (https://community.hubspot.com/t5/COS-Design-Support/Trouble-changing-the-stacking-order-in-mobile-vi...) so you can see what we're looking at. 

Thanks in advance for any help!