Visual Order

Recipe 6.5 Preserve order

Sample:

Code:

<style>
   ul {
    display: flex;
    gap: 1rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

   li:first-child {
    order: 2; 
  }

   li:nth-child(2) {
    order: 3; 
  }

   li:last-child {
    order: 1; 
  }
</style>

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
</ul>