Как сделать жёсткий перенос flex элемента?

Question

[Дамир Саяхов]

Добрый день. Имею flex контейнер с свойствами

display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;

В нём расположены 5 элементов. У каждого разный по ширине контент.
Как сделать так что бы при определённом разрешении на первой строке оставались только 2 элемента, а остальные уходили на следующую строку?
В примере у некоторых контентных блоков жёстко задан размер, но на практике такого нет. Размер блока определяется его контентом.
В песочнице https://codepen.io/anon/pen/oMyxRG?

Comments

[Cocorico]

Не поняла вопрос. Нужно, чтобы при определенном разрешении два первых блока оставались на первой строке, при этом не указывая им ширину?

[Ankhena]

Либо задавать ширину, либо задавать для этих 2х блоков дополнительную обертку, а уже ей ширину 100% на нужном разрешении.

[Дамир Саяхов]

Ankhena, обёртку задать не получиться. Они должны "вариться" в общем контейнере, т. к. необходимо иметь возможность управлять порядком с помощью order

[Дамир Саяхов]

Виктория Шумская, Все верно. Ширина у первых двух блоков зависит от их контента

[Ankhena]

Дамир Саяхов, либо ширину либо обертку
можно ширину третьему

Answer 1

[Orbb]

разное флекс поведение в зависимости от разрешения экрана, разная ширина родителя на каждый media. В бутстрапе 4 подобное хорошо реализовано классами:

https://getbootstrap.com/docs/4.0/utilities/flex/

Comments

[Дамир Саяхов]

интересный вариант изучить как у них устроено. Спасибо. Может через margin-left(right): auto даже получиться