Orden de bloques flex en CSS

Supongamos que tenemos los siguientes bloques, alineados en una fila:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Cambiemos el orden en que se muestran en pantalla, sin modificar su orden en el código HTML.

Para ello existe la propiedad order, que establece el orden de los elementos específicos según la siguiente regla: aquel que tenga un valor mayor se colocará más cerca del final del eje, y aquel que tenga un valor menor se colocará más cerca del inicio.

El valor de la propiedad puede ser un número positivo o negativo. Por defecto, todos los elementos se suceden unos a otros, esto significa que su order es cero.

Cambiemos el orden de nuestros elementos. Para ello, asignemos al segundo elemento una clase adicional llamada elem y para esta clase establezcamos la propiedad order con el valor 1:

.elem {
	order: 1;
	border: 1px solid red;
}

Dado que todos los elementos por defecto tendrán un orden 0, y nuestro segundo elemento tendrá un orden mayor que los demás, entonces se ubicará después de ellos:

Ahora asignemos un valor negativo -1:

.elem {
	order: -1;
	border: 1px solid red;
}

En este caso, nuestro bloque se moverá al inicio del eje:

Prueba por tu cuenta el funcionamiento de esta propiedad para varias direcciones del eje.