Изменить flex-order при переносе на новую строку без @media

Question

Есть следующий лайаут:

* {
  box-sizing: border-box;
}

.page {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.container {
  width: 100%;
  max-width: 500px;
  background: #eee;
  margin: 0 auto;
  padding: 15px;
}

button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: transparent;
  border: 1px solid #333;
}

<div class="page">

  <button class="back">←</button>
  <div class="container">
    page content
  </div>
  <button class="close">×</button>

</div>

мне нужно именно при переносе элементов внутри div.page изменить порядок на такой:

.back {
  order: 0;
  margin-right: auto;
}
.close {
  order: 1
  margin-left: auto;
}
.container {
  order: 2;
}

Вопрос: возможно ли это без JS, только на чистом CSS; @media не решит вопрос т.к. контейнер может быть разной ширины, может также быть левое меню (свёрнутое или развернутое)

с JS я вижу 2 выхода:

положить кнопки в position: fixed и с помощью intersectionObserver ловить пересечения, добавлять margin-top для div.container;
создать header.page__header, также position: fixed и на ресайз страницы смотреть размеры и добавлять margin-top для div.container;

Вот такой результат мне нужен, когда происходит перенос внутри page

Хотелось бы решить этот кейс красиво на чистом CSS. Если кто знает решение — подскажите, пожалуйста.

Answer 1

Вместо запросов к экрану устройства с помощью @media, используйте запросы @container к элементу от которого должно зависеть поведение:

* { box-sizing: border-box; }

.page {
  container: page / inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  gap: 1em;
  /* For example only --> */ min-width: calc(80px + 1em); max-width: 100%; overflow: hidden; resize: both; box-shadow: 0 0 0 1px red;
}

@container page (max-width: 500px) {
  .container {
    order: 1;
    min-width: 100%;
  }
}

.container {
  flex: 1;
  /* max-width: 500px; Ограничение ширины контента. Опционально. */
  padding: 1em;
  background: #eee;
}

button {
  height: 40px;
  width: 40px;
  border: 1px solid #333;
  border-radius: 20px;
  background-color: transparent;
}

<div class="page">
  <button class="back">←</button>
  <div class="container">page content</div>
  <button class="close">×</button>
</div>

БЛОГ НА HUSL

Изменить flex-order при переносе на новую строку без @media

Ответы (1 шт):