Можно ли объединить 2 столбца вложенных div в один столбец, а затем изменить порядок с помощью CSS?

Итак, я почти уверен, что невозможно сделать следующее, но все же подумал, что спрошу!

У меня есть 2 столбца контента в дизайне моего сайта. У обоих есть плавающий div-обертка, поэтому они сидят рядом. Это хорошо выглядит на настольном макете, а на мобильном (отзывчивом) макете они в настоящее время заполняются до 100% ширины и располагаются друг над другом.

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

DESKTOP
1 5
2 6
3 7
4 8

MOBILE
1
5
2
3
6
7
8
4

Надеюсь, это достаточно ясно! Я знаю, что могу использовать flexbox для изменения порядка на мобильном макете, но насколько я могу изменить порядок, это изменить порядок только в каждом отдельном div-оболочке. Также пытались по-разному перемещать вложенные элементы div на макете рабочего стола, но безрезультатно.

РЕДАКТИРОВАТЬ: Извините, я должен был вставить свой код либо:

<div id="container">
  <div class="wrapper-left">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
  </div>
  <div class="wrapper-right">
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

or

<div id="container">
  <div class="wrapper">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

Также вот изображение, иллюстрирующее то, что мне нужно. Искренние извинения, это мой первый вопрос здесь!

Пример макета


mobile layout css flexbox responsive
person Stuart Brown    schedule 20.05.2016    source источник
comment
чтобы мы могли помочь вам, пожалуйста, включите текущий код, который вы используете. stackoverflow.com/help/mcve   -  person Aaron    schedule 20.05.2016
comment
это возможно, но предоставьте структуру HTML.   -  person Dhaval Chheda    schedule 20.05.2016
comment
Если вы знаете высоту общей обертки, вы можете.   -  person Paulie_D    schedule 20.05.2016
comment
Сделайте 4 родительских div, а затем 2 дочерних div в каждом.. это будет работать.   -  person Leo the lion    schedule 20.05.2016

Ответы (3)


arrow_upward
1
arrow_downward

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

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}

#container{
  width: 100%;
  height: 100%;
}

.wrapper{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.red{
  background-color: red;
}

.yellow{
  background-color: yellow;
}

.divInside{
  border: 1px solid;
  height: 25%;
  width: 50%;
  flex-basis: 49%;
}

.div1{
  order: 1;
}

.div2{
  order: 3;
}

.div3{
  order: 5;
}

.div4{
  order: 7;
}

.div5{
  order: 2;
}

.div6{
  order: 4;
}

.div7{
  order: 6;
}

.div8{
  order: 8;
}

@media screen and (max-width: 400px){
  .wrapper{
    width: 100%;
  }
  
  .divInside{
    flex-basis: 100%;
  }
  
  .div3{
    order: 4;
  }
  
  .div4{
    order: 8;
  }
  
  .div8{
    order: 7;
  }
}
<div id="container">
  <div class="wrapper">
    <div class="divInside div1">1</div>
    <div class="divInside div2">2</div>
    <div class="divInside div3">3</div>
    <div class="divInside div4">4</div>
    <div class="divInside div5">5</div>
    <div class="divInside div6">6</div>
    <div class="divInside div7">7</div>
    <div class="divInside div8">8</div>
  </div>
</div>

person Francisco Romero    schedule 20.05.2016
comment
В вашем демо размещение div неправильное. 5 должно быть меньше 1, но не 2. Проверьте ответ на вопрос. - person Leo the lion; 20.05.2016
comment
Вы продемонстрировали, чего (кажется) ОП уже добился. Однако суть проблемы здесь заключается в смешении элементов из обоих столбцов друг с другом и переупорядочении их в некоторых местах. - person Serlite; 20.05.2016
comment
@Leothelion Спасибо за отзыв. Я изменил свой ответ :) - person Francisco Romero; 20.05.2016
comment
@Serlite Спасибо, что поправили меня. Я обновил свой ответ :) - person Francisco Romero; 20.05.2016
comment
но все равно ты не понял какой оп нужен. - person Leo the lion; 20.05.2016
comment
@Леотелион Почему бы и нет? В нем есть два столбца на первом шаге, а затем числа, упорядоченные в качестве его примера. - person Francisco Romero; 21.05.2016
comment
Если вы измените высоту элементов div, чтобы они были разными, макет не работает, извините. Спасибо за попытку, доблестный труд! - person Stuart Brown; 21.05.2016

arrow_upward
1
arrow_downward

Было бы просто решить эту проблему, если бы вы установили HTML в структуру таблицы css (display:table-row; и display:table-cell;), установив желаемые значения для формата рабочего стола.

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

.main > div > div {
  border: 1px solid silver;
}

@media (min-width: 400px) {
  .main {
    display: table;
    width: 100%;
  }
  .main > div {
    display: table-row;
  }
  
  .main > div > div {
    display: table-cell;
  }
}
<div class='main'>
  <div>
    <div>1</div>
    <div>5</div>
  </div>
  <div>
    <div>2</div>
    <div>6</div>
  </div>
  <div>
    <div>3</div>
    <div>7</div>
  </div>
  <div>
    <div>4</div>
    <div>8</div>
  </div>
</div>

person LcSalazar    schedule 20.05.2016
comment
Большое спасибо за попытку. К сожалению, это не работает, когда все div имеют разную высоту. Я обновил свой исходный вопрос изображением, чтобы проиллюстрировать, что мне нужно. - person Stuart Brown; 21.05.2016

arrow_upward
0
arrow_downward

Примечание: решение ТОЛЬКО для Firefox

Существует экспериментальное свойство CSS display для contents, которое позволит нам иметь требуемую структуру, но по мере необходимости разделять соответствующие оболочки.

Я записываю его здесь в информационных целях в ожидании принятия другими браузерами.

Справочник по MDN

Эти элементы не создают конкретную коробку сами по себе. Они заменяются их псевдо-блоками и их дочерними блоками.

Демонстрация Codepen

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  display: flex;
}
.wrapper {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.red > .divInside {
  background-color: red;
}
.yellow > .divInside {
  background-color: yellow;
}
.divInside {
  border: 1px solid;
  height: 25%;
  width: 100%;
  order: 0;
}
.red .divInside:nth-child(1) {} .red .divInside:nth-child(2) {
  order: 3;
}
.red .divInside:nth-child(3) {
  order: 5
}
.red .divInside:nth-child(4) {
  order: 8
}
.yellow .divInside:nth-child(1) {
  order: 2;
}
.yellow .divInside:nth-child(2) {
  order: 5
}
.yellow .divInside:nth-child(3) {
  order: 6
}
.yellow .divInside:nth-child(4) {
  order: 7
}
@media screen and (max-width: 760px) {
  .wrapper {
    display: contents;
  }
  #container {
    flex-direction: column;
  }
}
<div id="container">
  <div class="wrapper red">
    <div class="divInside">1</div>
    <div class="divInside">2</div>
    <div class="divInside">3</div>
    <div class="divInside">4</div>
  </div>
  <div class="wrapper yellow">
    <div class="divInside">5</div>
    <div class="divInside">6</div>
    <div class="divInside">7</div>
    <div class="divInside">8</div>
  </div>
</div>

person Paulie_D    schedule 20.05.2016
comment
Ну вот... исправлено. - person Paulie_D; 20.05.2016