首先显示最后<li>

Question

是否可以使用JavaScript在没有的列表开头显示最后一个<li>？

例如，如果我有此代码，<li>Bob</li>如何在<li>James</li>之前显示，同时保持结构不变？

<ul>
<li>James</li>
<li>Chris</li>
<li>Bobby</li>
<li>Bob</li>
</ul>

注意：我不能使用JavaScript！

Answer 1

假设您无法操纵html（例如添加id或class属性）：

ul{display:flex;flex-wrap: wrap;}/*allows use of the 'order' attribute; allows seperate lines*/
li{width: 100%;}/*puts each list item back on a separate line*/
li:nth-child(1){order:2}/*make the 1st li item the 2nd*/
li:nth-child(2){order:3}
li:nth-child(3){order:4}
li:nth-child(4){order:1}/*make the 4th li item the 1st*/

兼容性：http://caniuse.com/#feat=flexbox