Как я могу переупорядочить свои отделения, использующие только CSS?

CSS действительно не должен использоваться для реструктуризации бэкенда HTML. Однако возможно, если Вы знаете высоту обоих включенных элементов и чувствуете hackish. Кроме того, текстовый выбор будет испорчен при движении между отделениями, но поэтому HTML и порядок CSS противоположны.

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

, Где XXX и YYY высоты firstDiv и secondDiv соответственно. Это будет работать с запаздывающими элементами, в отличие от главного ответа.

Ну, с небольшим количеством абсолютного расположения и некоторой изворотливой установкой поля, я могу быть рядом, но это не прекрасно или симпатично:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

"граничная вершина: 4em" особенно противный бит: это поле должно быть скорректировано согласно сумме содержания в firstDiv. В зависимости от Ваших строгих требований это могло бы быть возможно, но я надеюсь так или иначе, что кто-то мог бы быть в состоянии основываться на этом для твердого раствора.

комментарий Eric о JavaScript должен, вероятно, преследоваться.

Отрицательные верхние поля могут достигнуть этого эффекта, но они должны были бы быть настроены для каждой страницы. Например, эта разметка...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... и этот CSS...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... позволил бы Вам вытягивать второй абзац выше первого.

, Конечно, необходимо будет вручную настроить CSS для различных длин описания так, чтобы вводный абзац подпрыгнул ассигновать сумма, но если Вы ограничили управление другими частями и полный контроль над разметкой и CSS тогда, это могло бы быть опцией.

Если Вы знаете или можете осуществить размер для будущего верхнего элемента, Вы могли бы использовать

position : absolute;

В Вашем css и дать отделениям их положение.

иначе JavaScript кажется единственным способом пойти:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

или что-то подобное.

редактирование: Я просто нашел это, которое могло бы быть полезным: w3 перемещение документа css3 - к

Вот решение:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

, Но я подозреваю, что у Вас есть некоторое содержание, которое следует за отделением обертки

Нет абсолютно никакого способа достигнуть того, что Вы хотите через один только CSS при поддержке pre-flexbox агентов пользователя ( главным образом старый IE) - если :

1. Вы знаете точную представленную высоту каждого элемента (если так, можно абсолютно расположить содержание). Если Вы имеете дело с динамично сгенерированным содержанием, Вам не повезло.
2. Вы знаете точное число этих элементов будет. Снова, если необходимо сделать это для нескольких блоков содержания, которые сгенерированы динамично, Вам не повезло, особенно если существуют больше чем три или около этого.

, Если вышеупомянутое верно затем, что можно сделать то, что Вы хотите путем абсолютного расположения элементов -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

Снова, если Вы не знаете, высота хочет для, по крайней мере, #firstDiv, нет никакого способа, которым можно сделать то, что Вы хотите с помощью одного только CSS. Если какое-либо это содержание является динамичным, необходимо будет использовать JavaScript.

Как другие сказали, это не что-то, что Вы хотели бы сделать в CSS. Можно уклониться от него с абсолютным расположением и странными полями, но это - просто не надежное решение. Наилучший вариант в Вашем случае состоял бы в том, чтобы обратиться к JavaScript. В jQuery это - очень простая задача:

$('#secondDiv').insertBefore('#firstDiv');

или более в общем:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

Только решение для CSS 1. Либо высота обертки должна быть фиксированной, либо 2. Высота второго div должна быть фиксированной