Repositioning blocks from one to two columns in the old fashioned way

Question

css

Tell me, is it possible to somehow concisely implement a permutation from one to two columns of blue blocks (fixed width, different height) relative to the main green (preferably stretched) when changing the browser width without using JS and media queries?

Answer 1

If you make blocks 1,2,...6 fixed width, set them to float:left, and make the column itself in% of the screen width, then when stretched and wide enough for two blocks, they will be in two columns. But the truth of beauty when laying will not work.

Answer 2

The first option I have no idea how to do.
For the second option, play around with floats or with display:inline-block. Perhaps something will suit, but such stacking of blocks most likely will not work.