CSS Order
12/12/2025
El atributo order se utiliza para ordenar los elementos HTML.
Al ordenar los elementos dentro de una etiqueta <div> con la propiedad order, es necesario que tenga las características display: flex; y flex-wrap: wrap;.
Sin CSS Order
<style>
.row {display: flex; flex-wrap: wrap;}
.box1, .box2, .box3 {height: 50px; width: 100%;}
.box1 {border: 1px solid #000; background-color: #000;}
.box2 {border: 1px solid #883d3d; background-color: #883d3d;}
.box3 {border: 1px solid gray; background-color: gray;}
</style>
<div class="row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>Con CSS Order
<style>
.row {display: flex; flex-wrap: wrap;}
.box1, .box2, .box3 {height: 50px; width: 100%;}
.box1 {border: 1px solid #000; background-color: #000;}
.box2 {border: 1px solid #883d3d; background-color: #883d3d;}
.box3 {border: 1px solid gray; background-color: gray;}
.order1 {order: 1;}
.order2 {order: 2;}
.order3 {order: 3;}
</style>
<div class="row">
<div class="box1 order2"></div>
<div class="box2 order3"></div>
<div class="box3 order1"></div>
</div>