更改CSS或javascript中的div顺序

假设我有这样的布局：

<div id="main">            
    <div id="NormalContent">
        {some content which is a fixed length list}
    </div>
    <div id="FeaturedContent">
        {some content which may contain a long list}
    </div>
</div>

{某些内容是固定长度的列表}
{可能包含长列表的某些内容}

我想把FeaturedContent放在普通内容之上

---

我可以用CSS做这个吗？我想我可以使用Javascript？

在Javascript中，您只需在页面上对它们重新排序即可

---

使用CSS，如果它们并排（在某些条件下）可以左右交换，但不能一个在另一个之上。

如果您确切知道FeaturedContent和NormalContent的维度，您可能可以使用position:relative和playing With the top属性

i、 e

但是为了让它们流动。。。隐马尔可夫模型。。。我不确定你能做到

使用jQuery，您可以执行以下操作：

 $("#NormalContent").remove().insertAfter($("#FeaturedContent"));

---

这是一种使用一行jQuery移动它们的更清晰的方法：

$('#FeaturedContent').prependTo('#main');

---

对于非jquery答案

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

---

请注意，不需要从DOM中删除它，第二次添加它将移动它。

这个答案似乎也适用。CSS（3）唯一，非常优雅的解决方案

---

CSS3中有一个模糊的特性允许这样做——遗憾的是，该文档已经有7年多的历史了，据我所知，没有任何浏览器尝试实现这一点。+1 Alohci，这确实是模糊的。老实说，我很高兴没有一群CSS设计师像那样移动内容，所以我也不难过这个功能没有实现。但不是一个高于另一个……除非元素是固定的/绝对的/相对的。向上投票

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);