Делая некоторые основные предположения о вашем контенте, но вы можете использовать абсолютное позиционирование для выравнивания вещей.По сути, вы можете вытащить средние два элемента из потока документов и имитировать укладку посредством позиционирования.
В этом случае, если значение выше 767px, вся строка находится в потоке документа.Когда ниже 767px, мы переставляем внутренние два элемента и устанавливаем контейнер на justify-content: space-between, чтобы обеспечить визуальное пространство.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.flex_container {
position: relative;
display: flex;
}
.flex_item {
flex: 1;
height: 120px;
border: 1px solid orange;
padding: 40px;
background-color: red;
text-align: center;
}
@media (max-width: 767px) {
.flex_container {
justify-content: space-between;
}
.flex_item {
padding: 20px;
}
.square {
flex: 0 1 33%;
}
.rect {
position: absolute;
left: calc(100% / 3);
width: calc(100% / 3);
height: 50%;
}
.rect.three {
top: 50%;
}
}
<div class="flex_container">
<div class="one flex_item square">
One
</div>
<div class="two flex_item rect">
Two
</div>
<div class="three flex_item rect">
Three
</div>
<div class="four flex_item square">
Four
</div>
</div>
Опять же, будьте осторожны - это предполагает, что вы можете контролировать высоту контейнера и размеры содержимого внутри.Если нет, то этот тип макета довольно легко распадается.Как указано в других комментариях, если вы хотите больше структуры и стабильности, было бы лучше обернуть внутренние элементы другим flex-элементом с flex-direction: column.Просто знайте риски!