Is it possible to change the order of list items using CSS3?

Question

Is it possible to change the order of list items using CSS3?

For example, if a list is coded in HTML in 1,2,3,4,5 order, but I want it to show in 5,1,2,3,4 order.

I'm using a CSS overlay to modify a Firefox extension, so I can't just change the HTML.

HTML Code

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

Solution 1

You can do it using flexbox.

Here's a fiddle I created for you: https://jsfiddle.net/x56hayht/

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>

According to csstricks:

The order property is a sub-property of the Flexible Box Layout module.

Flex items are displayed in the same order as they appear in the source document by default.

The order property can be used to change this ordering.

Syntax:

order: number

Hope it helps. Cheers!

Solution 2

If you need just reverse, use:

ul {
    display: flex;
    flex-direction: column-reverse;
}

Solution 3

Yes, you can using the flexible box model's order css property. Be aware that the parent element must have display:flex set

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -moz-flex-flow: wrap;
  -webkit-flex-flow: wrap;
  flex-flow: wrap;
}
ul li {
  width: 100%
}
ul li:nth-of-type(1) {
  order: 2;
}
ul li:nth-of-type(2) {
  order: 3;
}
ul li:nth-of-type(3) {
  order: 4;
}
ul li:nth-of-type(4) {
  order: 5;
}
ul li:nth-of-type(5) {
  order: 1;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Also be aware that not all browsers support the flexible box model as outlined here...http://caniuse.com/#feat=flexbox

However, there are quite a few polyfills out there you can use to bring support for older browsers if you need to support older browsers

Comments

[Noitidart]

You can do it with CSS with the order property as in solutions below, however I personally do not prefer it because you can't animate/transition the changing of the order.

[RockPaperLz- Mask it or Casket]

@Noitidart First, love your code. Big fan of yours. Always impressed. :-) Second, what do you recommend?

[Noitidart]

Thanks @RockPaperLizard! I really appreciate that note! I use react so this is very easy for me to hammer out in a few minutes but without a ui/component kit, it might take some more time. I use block level elements and transformY. Modifying transform for perf is nice in that it doesn't cause repaint.

[RockPaperLz- Mask it or Casket]

Great answer. Thank you! Herm Luna's answer uses flex-direction: column where instead you chose flow-flow: wrap. Which is a better choice? Or is that better as another question?

[RockPaperLz- Mask it or Casket]

Great answer. Thank you! Leo's answer uses flex-flow: wrap where instead you chose flex-direction: column. Which is a better choice? Or is that better as another question?

[hdotluna]

Basically, I chose flex-direction rather than flex-flow because flex-flow is shorthand of flex direction and wrap. If I am not mistaken. I just based it on your needs. But it's almost the same. You don't need to wrap elements. Leo's answer is almost the same as mine. So, we are awesome :D

[Leo]

Well, it doesn't really matter in the context of your question which is about the order of the items. It all depends on how you want to layout the items the you'd use an appropriate value of either flex-wrap or flex-direction...flex-flow is only a shorthand for the above mentioned properties...similar to font for font-size, font-weight...or border for border-width, border-style, etc

[RockPaperLz- Mask it or Casket]

Thanks Leo. Your answer and Herm Luna's answer are both top notch. I'm going to accept Herm Luna's answer because I wound up using flex-direction: column and because he/she has lower rep. But I award you my sincere appreciation and gratitude as well, which is much more valuable than rep! Thank you so very much for your help!

[Leo]

@RockPaperLizard cool! Glad I can help, I've just upvoted his/her answer