For 'don't just wrap one, wrap TWO', I've used nested flex wrappers. For three... I'm not sure if there's a good way to first wrap three then wrap two when there's not enough room for three. But for two, just:

    <div class="display-flex-wrap">
      <div class="display-flex-wrap">
        <div>one</div>
        <div>two</div>
      </div>
      <div class="display-flex-wrap">
        <div>three</div>
        <div>four</div>
      </div>
    </div>

That kind of assumes all the inner div's are the same width too; I'm not sure if your question necessarily does or not.

If it's possible to do something more sophisticated and clever with flexbox I don't know... but maybe with grid? I don't have my head completely wrapped around grid, but currently i naively believe it can literally do anything.

I add media queries and define percentage widths on the flex items.

I bet there's an unsensible way using :last-child, :nth-child, and percentages.