Streaming live at 10am (PST)

Columns stacking on mobile

Hello,

How do you change column stacking order on mobile? Right now, I have it like the following on desktop:

Image - Text (side by size)
Text - Image
Image - Text

This is stacking as follows on mobile:

Image
Text
Text
Image
Image
Text

How do I stack the columns so Images and Text are alternated properly, like so:

Image
Text
Image
Text
Image
Text

Thank you!

Hello!

Brandon here with the Webflow Customer Support Team!

I will be happy to help you with your question regarding getting columns to stack the way you want them.

Without a share link I cant say for 100% certain, but just based off how you have the info it is setup with horizontal flex and then changed to vertical Flex.

So the way you have it on desktop it is in a sense reading it as Image > text > Text > image > Image > Text

It is reading the content from left to right and then down to the next row and so forth.

What you can do is use the reverse order or specifically set the order of the elements by choosing how they show compared to first or last.

This has to do with Positioning elements within a Flex or Grid layout.

If you can provide the share link of your project I can show you.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

1 Like

That worked like a charm! I applied flex layout to the columns tag, changed to vertical and reversed.

Thanks a lot!

1 Like