How to prevent elements from "flowing" on top of each other when resizing the browser window?

Question

css

Greetings! How it is possible to forbid "leakage" of elements on each other?
For example, if the element "leaks", then it is transferred to a new line, i.e. under the element on which it flowed?
Here, I sketched an example (in the first image, the browser window is open to full screen. In the second image, the window is reduced):

Regarding this example, you need to make sure that the element "1" when flowing onto the element "2" goes up, and the element "3" when flowing element "2" went down.
I hope I explained clearly. Where to dig?)

Answer 1

If they showed a live example, it would be easier. There is an option to use @media.
With a screen resolution of max-width: 768, for example, make the width of the blocks equal to 100%, not 33%

Answer 2

Well, so clear red - you are using position: absolute. In this scenario, the elements stop "pushing".
Either change absolute to floats or flex, or change the position of top, left, and so on through @ media at the desired screen resolution.