Как настроить отзывчивый макет, который оборачивается на основе ширины/обертывания контента вместо точек перерыва CSS? ⇐ Javascript

[Anonymous]

У меня есть компонент Vue.js с панелью инструментов, которая содержит три раздела: действия, фильтры и поиск с помощью кнопок. В текущей реализации используются точки останова CSS для управления упорядочением макета, но это вызывает раннее изменение порядка, когда все еще достаточно горизонтального пространства. Если тогда пространства недостаточно для фильтров, они переворачивают на следующую строку, и если не хватает места для поиска/кнопок, чтобы быть на первой строке с действиями, они перемещаются в третью строку после того, как фильтры уже были перестановлены. XL Breakpoint (1920px и больше) < /p>
Сама панель инструментов: < /p>

:class="[
'px-4',
'd-md-flex',
'align-start',
'flex-wrap',
'flex-row',
'flex-xl-nowrap',
]"
style="column-gap: 12px"
>




:class="[
'd-flex',
'align-center',
'table-filters-header',
'flex-wrap',
'order-3',
'order-xl-2',
]"
style="column-gap: 8px; flex-basis: 100%"
>



:class="[
'ml-md-auto',
'my-1',
'd-flex',
'align-center',
'order-2',
{ 'order-xl-3': !split },
]"
>






По сути, это то, как он выглядит в простом html/css:

[Action buttons]
[Filter1] [Filter2] [Filter3] etc.
[Search] [Buttons]

< /code>
.toolbar {
display: flex;
flex-wrap: wrap;
flex-xl-nowrap: true;
}
.filters {
order: 3;
order-xl-2;
flex-basis: 100%;
}
.buttons {
order: 2;
order-xl-3;
margin-left: auto;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... apping-ins