Make columns appear on top of each other on mobile devices?

Design help General
1

As the title say i want to know how i can make columns appear stacked on mobile instead of side by side. My current solution is to just hide the images on mobile devices, but that doesn’t seem ideal.

It currently looks like this on desktop: Text>Image or Image>Text

And i want it to look like this:
Text
Image

Thanks all! :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/gluds-cafe?utm_medium=preview_link&utm_source=designer&utm_content=gluds-cafe&preview=36575f97688c0dd5fadbe2aed16be9a5&mode=preview

2

Hello @Staugaard,

I would recommend you to use grid instead of columns. But to fix the mobile breakpoint for your website, just change your section with the pictures from display flex to display block, that way your columns will show stacked on top of each other. I hope this helps.

3

thanks you very much!

But just one more question: why is it recommended to use grids over columns?

4

No problem! Oh man where to begin, so in a nutshell, grid gives you way more flexibility for your designs that the pre-made columns. I would advice you to getting to using grid for all your designs and you will see the difference. Check this video out if you haven’t already How to build CSS grid layouts in 2021 — Web design tutorial - YouTube

5

such a good video thanks!

1 Like