Да, такое решение есть. Но для данного специфического поведения расположения блоков при уменьшении ширины окна браузера вам понадобятся медиа запросы.
Ваш HTML код может выглядеть примерно так:
```html
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
```
A CSS будет выглядеть так:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 1 0 200px; /* Можно изменить на свою минимальную ширину */
height: 200px;
}
@media (max-width: 1000px) {
.box3 { order: -1; }
.box1 { order: 0; }
.box2 { order: 1; }
}
@media (max-width: 600px) {
.box1 { order: -1; }
.box2 { order: 0; }
.box3 { order: 1; }
}
```
В этом примере на десктопной версии все три блока располагаются в одну строку. При уменьшении размеров экрана меньше 1000px, блок 3 перескакивает вверх, а блоки 1 и 2 остаются в строке. А если размер экрана уменьшился до 600px, то блок 1 перескакивает на верх, а блоки 2 и 3 сдвигаются вниз.
flex: 1 0 200px устанавливает минимальную ширину блока, после которой блок начнет переходить на новую строку. order изменяет порядок следования элементов внутри flex контейнера. Поменяв order, мы и достигаем нужного порядка расположения блоков.
Пожалуйста, учтите что CSS выше это пример и значения в нем подбирались для демонстрации конкретного вопроса. В реальном проекте вам понадобится подобрать соответствующие значения чтобы содержимое корректно отображалось на различных устройствах.
