Ordem dos blocos flex em CSS

Suponha que temos os seguintes blocos, alinhados em uma linha:

<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;
}

Vamos mudar a ordem em que são exibidos na tela, sem alterar sua ordem no código HTML.

Para isso, existe a propriedade order, que define a ordem de seguimento de elementos específicos de acordo com a seguinte regra: quem tem um valor maior, fica mais próximo do final do eixo, e quem tem um valor menor - fica mais próximo do início.

O valor da propriedade pode ser um número positivo ou negativo. Por padrão, todos os elementos seguem um após o outro, o que significa que o order deles é zero.

Vamos mudar a ordem dos nossos elementos. Para isso, vamos definir uma classe adicional 'elem' para o segundo elemento e para esta classe definir a propriedade order com o valor 1:

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

Como todos os elementos por padrão terão ordem 0, e nosso segundo elemento terá uma ordem maior que os demais, então ele será posicionado após eles:

Agora, vamos definir um valor negativo -1:

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

Neste caso, nosso bloco se moverá para o início do eixo:

Experimente por conta própria o funcionamento desta propriedade para várias direções do eixo.