Как задать порядок переноса flexbox элементов?

Question

[maksipes]

Есть вот такой лайаут:

https://codesandbox.io/s/throbbing-moon-lfhuk

Прошу прощения за кривую верстку, главное суть.

Тут все на flexbox - контейнер и в нем два элемента. В правом из них еще один контейнер, в котором Caption и еще контейнер, а в нем черные кнопки.

При сжатии сначала происходит перенос во в внутреннем контейнере - кнопки падают под Caption, а надо чтобы правый элемент целиком переносился вниз, и только после еще большего сжатия начинался перенос во вложенном контейнере - кнопки под надпись, а потом и сами кнопки друг под друга.

Как это можно сделать?

И еще - как сделать так чтобы элементы переносились или все сразу или не переносились вообще. Пример - кнопки будут переноситься так - сначала одна уйдет вниз, вверху останется три и т.д., а надо так - если места недостаточно для всех четырех, они все разом переносятся в столбик.

Буду благодарен за намеки, не обязательно полное решение. Спасибо.

Answer 1

[Nikolay Matyushkin]

1.

надо чтобы правый элемент целиком переносился вниз

Как вариант. Для достижения результата, нужно добавить этот медиа-запрос

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

Т.е. при уменьшении экрана до 526px блоки с классами flex-item-1 и flex-item-2 должны быть во всю ширину (width: 100%), а их родитель (flexbox-container-1) должен отображать детей в столбик (flex-direction: column).

2.

И еще - как сделать так чтобы элементы переносились или все сразу или не переносились вообще. Пример - кнопки будут переноситься так - сначала одна уйдет вниз, вверху останется три и т.д., а надо так - если места недостаточно для всех четырех, они все разом переносятся в столбик.

Вот наглядный пример