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

Question

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

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

Answer 1

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

#firstDiv {
    float: left;
}

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

Веселись, мой друг.

Answer 2

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

Answer 3

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

Answer 4

Я искал способ изменить порядок 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
});

Answer 5

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

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