Как я могу изменить порядок моих div с CSS?

Это решение использует только CSS и работает с переменным содержимым

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

Решение только для CSS (работает для IE10 +) - используйте свойство Flexbox order:

Демо: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Как говорили другие, это не то, что вы хотели бы делать в CSS. Вы можете выманить его с абсолютным позиционированием и странными полями, но это просто не надежное решение. Лучшим вариантом в вашем случае было бы обращение к javascript. В jQuery это очень простая задача:

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

или более общий:

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

Это можно сделать, используя Flexbox.

Создайте контейнер, который применяет как display: flex, так и flex-flow: column-reverse.

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

Источники:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

Нет абсолютно никакого способа добиться того, чего вы хотите, только с помощью CSS - , если:

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

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

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

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

Здесь решение:

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

Но я подозреваю, что у вас есть контент, следующий за оболочкой div...

С модулем макета CSS3 flexbox вы можете заказать divs.

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

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

<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 и дайте divs свою позицию.

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

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

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

edit: Я просто нашел это, что может быть полезно: w3 document css3 move-to

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

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

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

Комментарий Eric о javascript, вероятно, следует преследовать.

тебе просто нужно это! в css float сначала div слева или справа. float второй div слева или справа, как и первый. ясно левый или правый, как указано выше, два div для второго div. например:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

Удачи моему другу.

Решение с более крупной поддержкой браузера, затем flexbox (работает в IE≥9):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

В отличие от решения display: table; это решение работает, когда .wrapper имеет любое количество детей.

Это можно сделать только с помощью CSS!

Пожалуйста, проверьте мой ответ на этот похожий вопрос:

https://stackoverflow.com/questions/14011125/changing-dom-element-order-with-css-crocodoc

Я не хочу дважды публиковать свой ответ, но, скорее всего, родительский элемент должен стать flexbox. Например:

(только здесь используется префикс поставщика webkit.)

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

Затем поменяйте местами div, указав их порядок:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

Я искал способ изменить порядок divs только для мобильной версии, чтобы потом я мог хорошо стилизовать его. Благодаря ответу на nickf я получил, чтобы сделать этот кусок кода, который хорошо работал для того, что я хотел, поэтому, хотя я поделился им с вами, ребята:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

Просто используйте flex для родительского div, указав display: flex и flex-direction : column. Затем используйте порядок, чтобы определить, какой из дочерних div приходит первым

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

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

Где XXX и YYY - высоты первогоDiv и secondDiv соответственно. Это будет работать с конечными элементами, в отличие от верхнего ответа.

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

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

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

У меня есть намного лучший код, сделанный мной, он настолько большой, просто для того, чтобы показать обе вещи... создать таблицу 4x4 и вертикальное выравнивание больше, чем только одну ячейку.

В нем не используется IE-хак, нет вертикального выравнивания: средний; на всех...

Он не используется для вертикального центрирования таблицы отображения, отображения: table-rom; дисплей: таблица-клетки;

Он использует трюк контейнера, который имеет два div, один скрыт (позиция неверна, но имеет родительский размер с правильным размером), один вид сразу после скрытого, но с вершиной: -50%; поэтому он должен корректировать положение.

Смотрите div-классы, которые делают трюк:  BloqueTipoContenedor  BloqueTipoContenedor_VerticalmenteCentrado    BloqueTipoContenido_VerticalmenteCentrado_Oculto    BloqueTipoContenido_VerticalmenteCentrado_Visible

Прошу прощения за использование испанского языка в именах классов (это потому, что я говорю по-испански, и это настолько сложно, что если я использую английский, я теряюсь).

Полный код:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

У меня есть простой способ сделать это.

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}

.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

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

Легко с css, просто используйте display:block и z-index свойство

Вот пример:

HTML:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

CSS

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

Изменить: полезно установить background-color для div-s, чтобы правильно видеть вещи.