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

by

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!

More Related Contents:

  1. Hide scroll bar, but while still being able to scroll
  2. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  3. How to remove the arrow from a select element in Firefox
  4. Setting transform-origin on SVG group not working in Firefox
  5. Remove outline from select box in FF
  6. Div 100% height works on Firefox but not in IE
  7. Flexbox column-reverse in Firefox, Edge and IE
  8. How do I make Firefox auto-refresh on file change?
  9. transition for background-image in firefox?
  10. Different implementation of Flexbox in Firefox and Chrome
  11. Style a checkbox in firefox — remove check and border
  12. :before && :after pseudo elements not showing Firefox
  13. Firefox 30 is not hiding select box arrows anymore
  14. “break-inside: avoid-column” doesn’t work in Firefox
  15. text-decoration not working for visited state link
  16. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  17. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  18. 2 colors in one placeholder of input field
  19. Flex elements ignore percent padding in Firefox
  20. How can i change the icon color to some other color in CSS?
  21. Unable to scroll on website
  22. CSS margin terror; Margin adds space outside parent element [duplicate]
  23. How create table only using tag and Css
  24. Center image element in parent div
  25. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  26. Can you use CSS to mirror/flip text?
  27. Fallback background-image if default doesn’t exist
  28. CSS list-style-image size
  29. HTML List element : Sharing the parent width into equal parts
  30. CSS: align two element, to the left and right in the same line WHITHOUT floats

Leave a Comment