How to make such transfer of elements?

Question

css

There is a container in which 6 blocks are located at a fixed distance from each other on the same line .

How to make it so that when the container is compressed in width , as soon as the blocks do not fit, IMMEDIATELY make two lines of 3 elements each ? (and so on, i.e. 3 rows of 2 elements, and 6 rows of 1)

It's cumbersome with media queries ..

I tried to do it through grids and them auto-fill, but nothing happened.

Thanks to those who responded!!

Answer 1

Only through @mediarequests, as it auto-fillwill transfer one at a time.

Answer 2

via media or js.

It's cumbersome with media queries.

well, do not fool yourself with the creation of a universal design - make a separate mobile version. and weigh much less