Order

Syntax

Class
Properties
order-{value}
order: {value};
order-first
order: -9999;
order-last
order: 9999;

Parameters

value
<int32>
<div class="t1 flex flex-row w-320 bg-c-white p-8 shadow-4"> <div class="t1 w-48 h-48 m-8 bg-c-blue"></div> <div class="t1 w-48 h-48 m-8 bg-c-blue"></div> <div class="t1 order-0 w-48 h-48 m-8 bg-c-red"></div> <div class="t1 w-48 h-48 m-8 bg-c-blue"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Make it the first among the items.
t1 order-first
.t1.order-first { order: -9999; }
Make it the last among the items.
t1 order-last
.t1.order-last { order: 9999; }
Make it the second among the items.
t1 order-2
.t1.order-2 { order: 2; }