Estoy tratando de crear un diseño receptivo con Flexbox que me permita alternar ambas direccionesrow yrow-reverse.

Quizás puedas entenderlo mejor con alguna imagen (ten en cuenta el orden de las cajas):

Y redimensionando:

O aun así:

Puede imaginar una flecha que atraviesa cada cuadro, debe ser posible pasar del 1 al 8 siguiendo la secuencia de números (como una serpiente).

¿Cómo puedo lograrlo usando flexbox?

Creo que puedo usar elorder Propiedad CSS, pero echo de menos una forma dinámica de configurarlo. No creo que pueda lograr este resultado con JavaScript, ya que no hay forma de obtener el número de la fila dinámica (excepto con hacks feos, y quiero evitarlos). Entonces, ¿tienes alguna idea?

Gracias.

Si desea escribir un ejemplo basado en mi código, puede usar esto:

.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>