Nikolay Matyushkin

В своё время мне эта статья помогла понять как работает комбинация flex-grow, flex-shrink и flex-basis.

Ознакомьтесь)

Так-то можно хоть табличной версткой покрыть всё :-D

В целом норм, но есть важный семантический недочёт. В header должны войти навигация и лого, далее идёт section в который войдут h1 и инфо-текст.

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.

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

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