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

Учитывая шаблон, в котором HTML не может быть изменен из-за других требований, как можно отобразить (переставить) divнад другим, divесли они не находятся в таком порядке в HTML? Оба divсодержат данные, которые различаются по высоте и ширине.

<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

Надеюсь, очевидно, что желаемый результат:

Content to be above in this situation
Content to be below in this situation
Other elements

Когда размеры зафиксированы, их легко расположить там, где это необходимо, но мне нужны некоторые идеи, когда содержимое является переменным. Ради этого сценария, пожалуйста, просто рассмотрите ширину, равную 100% на обоих.

Я специально ищу решение только для CSS (и оно, вероятно, придется встретить с другими решениями, если это не удастся).

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

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

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

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

Демо: 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 при поддержке пользовательских агентов 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.

Вот решение:

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

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

С модулем макета 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>

Если вы знаете или можете установить размер для элемента to-be-upper, вы можете использовать

position : absolute;

В твоем css и дай divам свою позицию.

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

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

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

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

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

<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, то это может быть вариантом ,

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

#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, вероятно, следует продолжить.

Это можно сделать только с помощью 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;
}

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

Например:

#firstDiv {
    float: left;
}

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

Если вы просто используете 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>

Я искал способ изменить порядок 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 (работает в 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есть какое-то количество детей.

Просто используйте 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 - высоты firstDiv и secondDiv соответственно. Это будет работать с конечными элементами, в отличие от верхнего ответа.

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

Он не использует IE взломать, не выровнять по вертикали: middle; вообще...

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

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

См. Классы div, которые делают трюк

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

Полный код:

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

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

<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 1. Либо высота обертки должна быть фиксированной, либо 2. Высота второго div должна быть фиксированной

.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, просто используйте 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;
    [...]
}

Edit: Это хорошо , чтобы установить некоторые background-colorк div-sвидеть вещи правильно.

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

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