Изменить порядок div в CSS или javascript

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

Для ответа не на запрос

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

Обратите внимание, что нет необходимости удалять его из DOM, добавление его во второй раз приведет к его перемещению.

Answer 2

это более простой способ переместить их с 1 строкой jQuery:

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

Answer 3

Если вы точно знаете размерность FeaturedContent & NormalContent, вам, возможно, удастся обойтись без использования позиции: относительного и игры с их главными свойствами.

т.е.

#NormalContent {
  position:relative;
    top:22px;
}

#FeaturedContent {
  position:relative;
    top:-22px;
}

Но чтобы заставить их течь ... хм ... не уверен, что ты сможешь это сделать.

С помощью jQuery вы можете сделать что-то вроде:

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

Answer 4

В Javascript вы можете просто изменить их порядок на странице.

С помощью CSS можно было бы поменять их местами влево и вправо, если бы они были рядом (с некоторыми условиями), но не друг над другом..

Answer 5

Этот ответ, кажется, работает так же. Только CSS (3), очень элегантное решение.

У CSS есть div, который находится справа под левым div. Div в обратном порядке в HTML