How to make responsive layout with flexbox?

Question

css

Hello, there are two rows each with a number of columns from 1 to N. In each row, all columns are the same width. How can I make the columns rebuild from one row to two at lower resolutions and also occupy an equal width each? For example, if in one row there are 4re by 25%, then at a lower resolution 2 by 2 by 50%.
Link to CodePen
Thanks in advance.

Answer 1

Use flex-growto increase your blocks from 25% to 50% at the desired breakpoint