How to set the wrapping order of flexbox items?

Question

css

There is such a layout:
https://codesandbox.io/s/throbbing-moon-lfhuk
I apologize for the crooked layout, the main thing is the point.
Everything is on flexbox - a container and two elements in it. In the right of them there is another container, in which there is a Caption and another container, and there are black buttons in it.
When squeezing, first the transfer occurs in the inner container - the buttons fall under the Caption, but it is necessary that the right element is completely transferred down, and only after even more compression does the transfer begin in the nested container - the buttons under the label, and then the buttons themselves under each other.
How can I do that?
And yet - how to make sure that the elements are transferred either all at once or not transferred at all. Example - buttons will be transferred like this - first one will go down, three will remain at the top, etc., but it should be like this - if there is not enough space for all four, they are all transferred to a column at once.
I would be grateful for hints, not necessarily a complete solution. Thank you.

Answer 1

one.

it is necessary that the right element is completely transferred to the bottom

As an option. To achieve the result, you need to add this media query

@media (max-width: 526px) {
  .flexbox-container-1 {
    display: flex;
    flex-direction: column;
  }
  .flex-item-1,
  .flex-item-2 {
    width: 100%;
  }
}

Those. when the screen is reduced to 526px, boxes with classes flex-item-1 and flex-item-2 should be full width (width: 100%), and their parent (flexbox-container-1) should display children in a column (flex-direction) :column).
2.

And yet - how to make sure that the elements are transferred either all at once or not transferred at all. Example - buttons will be transferred like this - first one will go down, three will remain at the top, etc., but it should be like this - if there is not enough space for all four, they are all transferred to a column at once.

Here is a good example