La propiedad "order" de los items nos permiten indicar en que orden deben aparecer los items en el contenedor.
Por defecto la propiedad "order" almacena el valor 0. Los items aparecen dentro del contenedor en el mismo orden que los escribimos en el archivo html.
Podemos cambiar el flujo de los items dentro del contenedor indicando en la propiedad order valores enteros a partir de 0.
Cambiar la propiedad "order" del primer item por el valor 2 y el del último item por el valor 0. El item central fijar el valor 1:
Problema: Definir un Flexbox con tres items. Mediante la propiedad "order" cambiar hacer que aparezcan en forma inversa a como se los dispuso en el archivo HTML.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor1">
<div id="item1">Caja 1</div>
<div id="item2">Caja 2</div>
<div id="item3">Caja 3</div>
</div>
</body>
</html>
estilos.css
#contenedor1{
display: flex;
background-color: #000;
height: 300px;
color:white;
font-size:2rem;
}
#item1 {
order: 2;
background-color: #0078A6;
}
#item2 {
order: 1;
background-color: #0084B6;
}
#item3 {
order: 0;
background-color: #008CC1;
}