<article>
<h1>Examples of how the order property works</h1>
<p>The fourth item should be first because the order property has been set to -1.</p>
<ul class="example-1">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<p>The fourth item should be first because the order property has been set to 1. It is actually second because another item with the same value exists <em>before</em> it in the HTML document.</p>
<ul class="example-2">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
<p>The first item should be fourth because the order property has been set to 4. It is actually third because another item with the same value exists <em>after</em> it in the HTML document.</p>
<ul class="example-3">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
</article>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
article {
margin: 0 auto;
max-width: 800px;
}
p {
max-width: 60ch;
}
ul {
display: grid;
}
li {
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
order: #{$i};
}
}
}
.example-1 li:nth-child(4) {
order: -1;
}
.example-2 li:nth-child(4) {
order: 1;
}
.example-3 li:nth-child(1) {
order: 4;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.