在CSS或javascript中更改div顺序

Question

说我有这样的布局:

<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放在NormalContent之上.

我可以用CSS做到这一点吗？我想我可以使用Javascript吗？

Answer 1

对于非jquery答案

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

请注意,无需将其从DOM中删除,再次添加它将移动它.

Answer 2

这是使用1行jQuery移动它们的更清晰的方法:

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

Answer 3

在 Javascript 中，您可以简单地在页面上重新排序它们。

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