CSS Order
15/04/2026
Атрибут order используется для сортировки HTML-элементов.
При упорядочивании элементов внутри тега с помощью свойства order, обязательно должны быть установлены параметры display: flex; и flex-wrap: wrap;.
Без 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>С 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>
Advertisement
Continue Reading Below