order: 0 (default)
CSS
.container {
display: flex;
}
.box-1 {
order: 0;
}
Box-1
Box-2
Box-3
Box-4
Box-5
order: <value> (default)
CSS
.container {
display: flex;
}
.box-1 {
order: 1;
}
Box-1
Box-2
Box-3
Box-4
Box-5
box 1 is last because first four box (2, 3, 4, 5) is order 0 and last box (1) is order 1, so like 0, 1
Arrange the Box
CSS
.container {
display: flex;
}
.box-1 {
order: 4;
}
.box-2 {
order: 1;
}
.box-3 {
order: 2;
}
.box-4 {
order: 5;
}
.box-5 {
order: 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Suppose element have same order then arranged based on html element arranged order
CSS
.container {
display: flex;
}
.box-1 {
order: 4;
}
.box-2 {
order: 1;
}
.box-3 {
order: 2;
}
.box-4 {
order: 1;
}
.box-5 {
order: 3;
}
Box-1
Box-2
Box-3
Box-4
Box-5