Utilities for controlling an element's order within a parent container.
By default, items are ordered by their position in the DOM. To re-order an element, use d-order{#}.
<dt-stack direction="row" gap="200" align="center" justify="between" class="d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-bold-opaque d-bar-300 d-order-first">3</dt-stack> </dt-stack>
Class
|
Output
|
|---|---|
| .d-order1 | order: 1 !important; |
| .d-order2 | order: 2 !important; |
| .d-order3 | order: 3 !important; |
| .d-order4 | order: 4 !important; |
| .d-order5 | order: 5 !important; |
| .d-order6 | order: 6 !important; |
| .d-order7 | order: 7 !important; |
| .d-order8 | order: 8 !important; |
| .d-order9 | order: 9 !important; |
| .d-order10 | order: 10 !important; |
| .d-order11 | order: 11 !important; |
| .d-order12 | order: 12 !important; |
| .d-order-first | order: -9999 !important; |
| .d-order-last | order: 9999 !important; |
Order documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope