Как изменить порядок элементов без изменения HTML-кода?

Question

Это 3 inline-block и элементы, что означает, что они будут упорядочены рядом друг с другом.

Вот скрипка для просмотра всего живого: https://jsfiddle.net/8mdm8eox/

.wrapper {
  background: #fff;
  width: 100%
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3)
}

.firstElement {
  background: #000;
  color: #fff
}

.secondElement {
  background: grey
}

.thirdElement {
  background: #ddd
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

Так вот, что я хочу, я хочу, когда ширина экрана составляет 767px или меньше:

@media (max-width: 767px){}

Первые два элементаупорядочены по вертикали, а третий упорядочен по горизонтали с двумя другими элементами, чтобы они стали такими:

   _______________    ________________
   |First Element|    |ٍ              |
   _______________    |              |  
                      |Third Element |
   ________________   |              |
   |Second Element|   |              |
   _________________  _______________

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

Answer 1

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

:root {
  --firstElementHeight: 50px; /* adjust */
  --secondElementHeight: 50px; /* adjust */
  --thirdElementHeight: calc(var(--firstElementHeight) + var(--secondElementHeight)); /* the sum of other siblings heights so that the "columns" always match */
}

.firstElement,
.secondElement,
.thirdElement {display: inline-block; width: 33.33%}

.firstElement {background: #000; color: #fff}
.secondElement {background: grey}
.thirdElement {background: #ddd}

@media (max-width: 767px) {
  .wrapper {position: relative}
  .firstElement {height: var(--firstElementHeight)}
  .secondElement {height: var(--secondElementHeight); position: absolute; left: 0; top: var(--firstElementHeight)} /* moved down by the height of the .firstElement */
  .thirdElement {height: var(--thirdElementHeight)}
}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

Даже без CSS-переменных , решение позиционирования довольно простое и надежное.

Answer 2

Поскольку вопрос не помечен как flex или new tech, а также не включен в исходный код, это одно из решений, отражающее следующее:

* Обратите внимание, я изменил ширину элементов на 100% / 3.1 для визуального эффекта, вы можете изменить его в соответствии с вашими потребностями.

.wrapper {
  background: #fff;
  position: relative;
  width: 100%;
  height: 500px;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3.1)
}

.firstElement {
  background: #000;
  color: #fff;
  height: 33%;
}

.secondElement {
  background: grey;
  height: 33%
}

.thirdElement {
  background: #ddd;
  height: 33%
}

@media (max-width: 767px) {
  .firstElement, .secondElement, .thirdElement {
    width: 50%;
  }
  .firstElement {
    float: left;
  }
  .secondElement {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .thirdElement {
    float: left;
    height: 100%;
  }
}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

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

Answer 3

Существуют различные способы изменить порядок элементов без изменения HTML.

CSS flexbox предоставляет свойство order.Однако flex может не подойти вам, так как вы хотите, чтобы один элемент занимал две строки.Проблемы, с которыми вы можете столкнуться, обсуждаются здесь:

• Создайте разделитель div на две строки в сетке
• Возможно ли выравнивание элементов Flexтесно к элементам над ними?

Сетка-макет CSS, однако, предлагает много хороших решений вашей проблемы.Свойство order также доступно здесь, но в этом нет необходимости.

Вот одно решение, использующее свойство grid-template-areas.

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "first second third";
}

.firstElement {
  grid-area: first;
  background: #000;
  color: #fff
}

.secondElement {
  grid-area: second;
  background: grey
}

.thirdElement {
  grid-area: third;
  background: #ddd
}

@media (max-width: 767px) {
  .wrapper {
    grid-template-areas: "first third" 
                         "second third";
  }

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

jsFiddle demo

Поддержка браузера для CSS Grid.

Answer 4

Если вы не хотите использовать flex, могут помочь свойства макета таблицы.

Играйте с https://codepen.io/gc-nomade/pen/yjrOJJ или просто запустите демонстрацию ниже.

.wrapper {
  background: #fff;
  width: 100%;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 33%;/* will be usefull for the mediaquerie . tune to your own value / needs */
  margin: 0.11%;/* if ever needed */
}

.firstElement {
  background: #000;
  color: #fff;
}

.secondElement {
  background: grey;
}

.thirdElement {
  background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .wrapper {
    display: table;/* trigger the table-layout */
  }
  .a {
    display: block;
    margin: 2px;
  }
  .b {
    display: table-cell;/* make this one only acting as a cell aside previous */
  }
}

<div class="wrapper">
  <div class="firstElement a">First Element</div><!-- comment to override inline-block side effect 
  --><div class="secondElement a">Second Element</div><!--
  --><div class="thirdElement b">Third Element</div>
</div>

Для реального переупорядочения flex или grid сделают это в любом количестве детей.

Свойства макета таблицы позволяют использовать этот визуальный эффект в одной строке, но работают со старыми браузерами.

Answer 5

Вам необходимо использовать flex-wrap для .wrapper и order для детей.

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}

.wrapper {
  background: #fff;
  max-width: calc(100%/2);
  display: flex;
  flex-wrap: wrap;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 50%
}

.firstElement {
  background: #000;
  color: #fff;
  order: 1;
}

.secondElement {
  background: grey;
  order: 3;
}

.thirdElement {
  background: #ddd;
  order: 2;
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>