Flex column down to next row

[Symbiosis]

Hi,

I need help please. On the tablet screen device, I would like the details of contact to move down to the new row like the screenshot.

I’ve worked on the toggle and if I changed the margin calc it seems to work but when I added the CSS code in the Element CSS. I had a problem to change it. Here is the code I added.

@media screen and (max-width: 1024px) and (min-width: 769px) {
$el.x col .x-row-inner:nth-child(2) {
flex-basis: calc(50% - 0.5rem) !important;
}
}

Thank you.

[nabeel]

Hi @Symbiosis ,

Thank you for reaching out to us. You can do this with the new Row element by specifying the number of columns in different break-points under Layout (see screenshot)

You can then remove your custom CSS. You can learn more about the Row element here https://theme.co/docs/row or see the video tutorial here https://www.youtube.com/watch?v=6pN_a4eD5NM

Hope this helps!

[Symbiosis]

Thanks @nabeel. Work well.

[christian]

You’re welcome, @Symbiosis.