24

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>
RockPaperLz- Mask it or Casket
  • 5,361
  • 10
  • 45
  • 69
  • 1
    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. – Noitidart Aug 30 '16 at 02:32
  • 1
    @Noitidart First, love your code. Big fan of yours. Always impressed. :-) Second, what do you recommend? – RockPaperLz- Mask it or Casket Aug 30 '16 at 02:37
  • 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. – Noitidart Aug 30 '16 at 02:42

3 Answers3

43

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!

hdotluna
  • 5,514
  • 4
  • 20
  • 31
  • 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? – RockPaperLz- Mask it or Casket Aug 30 '16 at 02:30
  • 1
    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 – hdotluna Aug 30 '16 at 02:37
7

If you need just reverse, use:

ul {
    display: flex;
    flex-direction: column-reverse;
}
a_vedenin
  • 71
  • 1
  • 1
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

Leo
  • 14,625
  • 2
  • 37
  • 55
  • 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 Aug 30 '16 at 02:29
  • 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 – Leo Aug 30 '16 at 02:41
  • 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! – RockPaperLz- Mask it or Casket Aug 30 '16 at 02:51
  • @RockPaperLizard cool! Glad I can help, I've just upvoted his/her answer – Leo Aug 30 '16 at 03:02