How to hard wrap a flex element?

Question

css

Good afternoon. I have a flex container with properties

display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;

It contains 5 elements. Each has different content.
How to make it so that at a certain resolution only 2 elements remain on the first line, and the rest go to the next line?
In the example, some content blocks have a fixed size, but in practice this is not the case. The block size is determined by its content.
In the sandbox https://codepen.io/anon/pen/oMyxRG?

Answer 1

different flex behavior depending on screen resolution, different parent width per media . In bootstrap 4, this is well implemented by classes:
https://getbootstrap.com/docs/4.0/utilities/flex/