Как расставить два блока?

Question

[Demigodd]

Как из этого


Получить такой результат ?


И для мобильных если сработал flex-wrap


В чем проблема скажите вы ?
Если задать обоим блокам flex: 1; так же первому блоку поставить margin-right;
То все сработает но функционал не будет респонсивным.

К примеру на малых экранах будет виден некрасивый margin-right; у первого блока.

Answer 1

[ⓒⓢⓢ]

что-нибудь такое https://jsfiddle.net/9tangp7r/
но не очень понятно почему медиа точками нельзя воспользоваться...

Answer 2

[L1nks]

На скорую руку, но как то так получилось
https://jsfiddle.net/gdh826cj/

Answer 3

[Sergey]

Добавьте для .content justify-content: space-around;

.content {
  border: 2px solid;
  padding: 3rem;
  
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.block1, .block2 {
  border: 1px solid blue;
}