Поменять место DIV с помощью CSS

Ответ 1

Кто-то связал мне это: Каков наилучший способ перемещения элемента, который находится сверху вниз в "Ревизионный дизайн" .

Решение в этом отлично работает. Хотя он не поддерживает старый IE, это не имеет значения для меня, поскольку Im использует отзывчивый дизайн для мобильных устройств. И он работает для большинства мобильных браузеров.

В принципе, у меня было это:

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

Это работало лучше, чем плавает для меня, потому что мне нужно, чтобы они были сложены друг на друга, и у меня было около пяти разных div, которые мне пришлось поменять местами.

Ответ 2

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

Этот метод работает во всех современных браузерах и IE9 + (в основном, в любом браузере, поддерживающем display: table). У него есть недостаток, который можно использовать только для максимум 3 братьев и сестер.

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

Это приведет к изменению порядка элементов от 1,2,3 до 2,3,1. В основном все, что отображается с дисплеем, установленным в table-header-group, будет располагаться в верхней части таблицы и в нижней части таблицы-нижнего колонтитула. Естественно, таблица-строка-группа помещает элемент в середину.

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

Вы можете проверить живую демонстрацию на codepen: http://codepen.io/thepixelninja/pen/eZVgLx

Ответ 3

Принятый ответ работал для большинства браузеров, но по некоторым причинам в браузерах iOS Chrome и Safari содержимое, которое должно было показать второе, скрывалось. Я пробовал другие шаги, которые заставляли контент стекаться друг над другом, и в итоге я попробовал следующее решение, которое дало мне предполагаемый эффект (порядок отображения содержимого контента на мобильных экранах) без ошибок сложного или скрытого содержимого:

.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}

Ответ 4

Используя только CSS:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/thirtydot/hLUHL/

Ответ 5

Предполагая, что ничего не следует

Если эти два элемента div - это в основном ваши основные элементы макета, и в HTML-таблице ничего не следует за ними, тогда есть чистое решение HMTL/CSS, которое принимает нормальный порядок, показанный в этой скрипте и способен перевернуть его вертикально, как показано в этой скрипте, используя одну дополнительную обертку div так:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

Это не сработает, если элементы будут следовать за этими div, так как эта скрипта иллюстрирует проблему, если следующие элементы не обернуты (они перекрываются #first_div) и эта скрипта иллюстрирует проблему, если также обернуты следующие элементы (#first_div меняет положение как с #second_div и следующие элементы). Поэтому, в зависимости от вашего варианта использования, этот метод может работать или не работать.

Для общей схемы компоновки, где все остальные элементы существуют внутри двух div, она может работать. Для других сценариев это не будет.

Ответ 6

В некоторых случаях вы можете просто использовать order свойств flex-box.

Очень просто:

.flex-item {
    order: 2;
}

Смотрите: https://css-tricks.com/almanac/properties/o/order/

Ответ 7

Поскольку у меня было несколько элементов, которые следовали за двумя элементами, которые я хотел переключить, уже опубликованные ответы не сработали для меня. Было выполнено следующее:

HTML

<div class="wrapper">
 <div id="first_div">first div</div>
 <div id="second_div">second div</div>
</div>

CSS

.flipit {
  position: relative;
}

.flipit #first_div {
  position: relative;
  top: 100px;
}

.flipit #second_div {
  position: relative;
  bottom: 100px;
}

Ответ 8

Это решение сработало для меня:

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

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

В моем случае мне не нужно было менять CSS элементов, которые мне нужно было переключать.