Streaming live at 10am (PST)

Tiling varying width columns


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






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:
(how to share your site Read-Only link)


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!


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