Change Order of List Items Via CSS

Change The Order of Your List Items. Reorder Your li List through CSS. Simple and Easy Way to Swap Order On Your UL.

Learn how to change the order of a list item with CSS. I wanted to change the order of some social media icons, but the WordPress plugin did not allow it. So I though a good option would be through CSS and I found a way how to swap list items order.

Here is how you can do it to.

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>