<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.