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

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

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

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

Комментарий Эрика о JavaScript, вероятно, следует рассмотреть.

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

position : absolute;

В вашем css и укажите позицию div.

в противном случае javascript кажется единственным выходом:

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

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

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

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

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

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

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

Вот решение:

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

Но я подозреваю, что у вас есть контент, который следует за оболочкой 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, тогда это может быть вариантом .

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

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

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

Абсолютно невозможно достичь желаемого только с помощью CSS, поддерживая предварительные пользовательские агенты 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 1. Либо высота обертки должна быть фиксированной, либо 2. Высота второго div должна быть зафиксирована

В вашем CSS поместите первый div влево или вправо. Переместите второй div влево или вправо так же, как и первый. Примените clear: left или right так же, как два вышеупомянутых div для второго div.

Например:

#firstDiv {
    float: left;
}

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

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

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

Он не использует никаких взломов IE, никакого vertical-align: middle; совсем...

Он не используется для вертикального центрирования display-table, display: 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>

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

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

Это легко с 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, чтобы все правильно видеть.

Я искал способ изменить порядок div только для мобильной версии, чтобы тогда я мог красиво оформить его. Благодаря ответу 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
});

Это можно сделать с помощью Flexbox.

Создайте контейнер, который применяет как дисплей: гибкий, так и гибкий поток: обратный столбец.

/* -- 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 (работает для 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

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

<!--  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;}
}

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

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

https://stackoverflow.com/a/25462829/1077230

Я не хочу дважды публиковать свой ответ, но суть в том, что родительский элемент должен стать элементом 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;
}

С помощью модуля макета CSS3 flexbox вы можете заказывать блоки div.

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

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

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

Решение с большей поддержкой браузера, чем 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 имеет любое количество дочерних элементов.

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

<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>

Если вы просто используете css, вы можете использовать flex.

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class = "price">
      <div>first block</div>
      <div>second block</div>
</div>

Заказ только для мобильных и сохраните родной порядок для рабочего стола:

// HTML

<div>
  <div class = "gridInverseMobile1">First</div>
  <div class = "gridInverseMobile1">Second</div>
</div>

// css

@media only screen and (max-width: 960px) {
  .gridInverseMobile1 {
    order: 2;
    -webkit-order: 2;
  }
  .gridInverseMobile2 {
    order: 1;
    -webkit-order: 1;
  }
}

Результат:

Desktop: First | Second
Mobile: Second | First

источник: https://www.w3schools.com/cssref/css3_pr_order.asp