Tiling varying width columns

Design help General
1

i have 4 columns, each containing either a picture or text. I want these columns to appear the same height but the contents are all different widths.

when the browser is made smaller, i want the far right column to stack under the top 3 like

1234
→
123
4

then

12
34

then

1
2
3
4

i can get this working with the various desktop/tablet/phone views as the settings can be changed, but if i start off from the desktop view then make the browser smaller, it always overflows before the columns are re-arranged (and before it switches to tablet view), so my question(s) is what sets the point at which the columns are re-arranged and how do i change it so that the content never overlaps?

Here is my site Read-Only: https://preview.webflow.com/preview/philip-gouldings-first-project?preview=bccc1f38259b90ae265d83f8b46b7a49
(how to share your site Read-Only link)

2

You should use Flex boxes with the setting “wrap-childen”. I think it’s the best solution for the result you are looking for. You will have more control on the responsive!

3

hmmm thanks but i need some more specific advice, ive been playing around with the wrap children thing for a while and while it allows some control of how the columns tile, it doesn’t seem to allow for control over at what point they tile