Jquery 随着决议的改变而改变li顺序

我有一个ul，由于流动性的原因，它像柱子一样工作。当屏幕分辨率改变时，有没有办法把最后一个li放在第一位

编辑： 好啊试图使其与flex box一起工作

 .postpreview ul {
list-style: none;
display: inline-flex;

}

.postpreview ul li {
flex: 0 100px 30px;
}

@media(max-width: 1000px) {
postpreview ul {
flex-direction: row-reverse;
justify-content: flex-end;
 }
}

现在，当分辨率变为移动时，它保持在右侧，而我，实际上需要它位于顶部。 这里有直播链接 css代码：

nav ul li { display: inline; margin: 0 100px; }

html代码：

<nav>
<ul>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
</ul>
</nav>

另一种解决方案：

您可以对不同的分辨率使用媒体查询。

CSS唯一解决方案使用：

，屏幕宽度阈值为1000px

---

更新：如果需要将布局从水平更改为垂直，请在媒体查询中使用

flex direction:column

。举例说明你想要什么和什么时候拥有会有所帮助，这个问题需要一些澄清。

可以使用jquery ui和jquery。你想根据屏幕大小反转li顺序吗？可以使用flex box。我知道我可以使用媒体查询更改样式，但真的有办法更改顺序吗。问题是，在第一个li中，我有博客内容，在第二个li中，我有日期和评论信息。因此，当分辨率更改为“移动”时，日期和注释将显示在底部。我需要它们在顶部，同时以更大的分辨率保持在右侧。是的，您可以借助媒体查询和jQuery来实现这一点。就像在各种分辨率上运行jquery。看得更清楚。弹性盒子看起来棒极了！必须重新做一点html。我想当有具体的事情发生时，我会提出一个新的问题。谢谢你指向那个方向！

var litag = $('ul');
var litags = litag.children('li');
litag.append(litags.get().reverse());

ul {
  display: flex;
}
li {
  flex: 0 0 30px;
}
@media(max-width: 1000px) {
  ul {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

var litag = $('ul');
var litags = litag.children('li');
litag.append(litags.get().reverse());