Estou tentando criar um layout responsivo com o Flexbox que permita alternar as duas direçõesrow erow-reverse.

Talvez você possa entender melhor com alguma imagem (lembre-se da ordem das caixas):

E redimensionando:

Ou ainda:

Você pode imaginar uma flecha que atravessa cada caixa; deve ser possível passar de 1 a 8 seguindo a sequência de números (como uma cobra).

Como consegui-lo usando o flexbox?

Eu acho que posso usar oorder Propriedade CSS, mas sinto falta de uma maneira dinâmica de defini-la. Eu não acho que posso alcançar esse resultado com JavaScript, pois não há como obter o número da linha dinâmica (exceto com hacks feios, e eu quero evitá-los). Então, você tem alguma ideia?

Obrigado.

Se você deseja escrever um exemplo com base no meu código, pode usar o seguinte:

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  width: 380px;
  height: 100px;
  background: red;
  margin: 5px;
  
  font-family: sans-serif;
  color: white;
  text-align: center;
  font-size: 2em;
  line-height: 150%;
}

<div class="flexbox-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>