可以先旋转父元素180deg，然后旋转子元素-180deg。

ul {
    transform: rotate(180deg);
}
ul > li {
    transform: rotate(-180deg);
}

Example Here
或者，可以将flex盒与order property.沿着使用
虽然从技术上讲，这并不是颠倒顺序，但您也可以将counter-increment与psuedo元素沿着使用。
Example Here

ul {
    list-style-type:none;
    counter-reset:item 6;
}
ul > li {
    counter-increment:item -1;
}
ul > li:after {
    content: counter(item);
}

你可以使用flexbox来实现这一点，它允许你使用flex-direction属性来反转顺序。

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

li {
    flex: 0 0 auto;
}

• spec
• live demo
• 有限的浏览器支持

<ol reversed>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
  <li>I am a list item.</li>
</ol>

• w3schools reference
• w3schools example

如果要按降序而不是升序对列表进行排序：
快速解答：reversed="reversed".
阅读以下说明：
在以前版本的HTML中，实现这一点的唯一方法是在每个lielement上放置一个value属性，其值依次递减。

<h3>Top 5 TV Series</h3>
<ol>
  <li value="5">Friends
  <li value="4">24
  <li value="3">The Simpsons
  <li value="2">Stargate Atlantis
  <li value="1">Stargate SG-1
</ol>

这种方法的问题是手动指定每个值可能会耗费大量的编写和维护时间，并且HTML 4.01或XHTML 1.0 Strict DOCTYPE中不允许value属性（尽管HTML 5修复了这个问题并允许value属性）新的标记非常简单：只需在ol元素中添加一个reversed属性，并可选地提供一个起始值，如果没有提供起始值，浏览器将计算列表项的数量，并从该数量倒计时到1。

<h3>Greatest Movies Sagas of All Time</h3>
<ol reversed>
  <li>Police Academy (Series)
  <li>Harry Potter (Series)
  <li>Back to the Future (Trilogy)
  <li>Star Wars (Saga)
  <li>The Lord of the Rings (Trilogy)
</ol>

由于该列表中有5个列表项，因此列表将从5倒计时到1。reversed属性是布尔属性。在HTML中，该值可以省略，但在XHTML中，它需要写成：reversed ="反向的"。
来源：https://dzone.com/articles/html-5-reverse-ordered-lists

使用此帮助现代浏览器支持此帮助

<ol reversed="reversed" start="3">
   <li> lorem ipsum </li>
   <li> Lorem ipsum dollar amet </li>
   <li> dollar amet </li>
</ol>

查看此链接...您可以使用flex-direction: row-reverse;
enter link description here