CSS FlexBox | Изменение порядка элементов в мобильном телефоне

Question

Я пытаюсь изучить CSS Flexbox и нашел препятствие.

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

См. Ниже визуальный:

Desktop:

Мобильный телефон:

Это код для выполнения такой:

 <div class="container">
    <div class="box box1">
      <div class="a">a</div>
      <div class="b">b</div>
    </div>
    <div class="box box2">
       <div class="c">c</div>
      <div class="d">d</div>
    </div>
  </div>

Это стили flexbox:

.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}

.container {
  display: flex;
  height: 100vh;
}

.a, .b, .c, .d {
  height: 50%;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }

  .box {
     height: 50vh;
  }
}

Вопрос : Когда в мобильном телефоне: - Как я могу заказать следующие div для отображения в столбцах (как есть) однако в следующем порядке:

а

с

д

б

К сожалению, я не могу найти решение для этого.

У меня есть кодовая ручка здесь строки CSS, которые имеют значение, начинаются со строки 162.

Заранее спасибо.

Answer 1

Вы можете рассмотреть display:contents (https://caniuse.com/#feat=css-display-contents) для элемента .box, тогда вы сможете использовать порядок для внутренних элементов:

.box {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
}
body {
 margin:0;
}
.container {
  display: flex;
  height: 100vh;
  background:blue;
}

.a,.b,.c,.d {
  height: 50%;
  border:2px solid;
}

@media all and (max-width: 500px) {
  .container {
    flex-direction: column;
  }
  .box {
    display:contents;
  }
  .b {
    order:2;
  }
}

<div class="container">
  <div class="box box1">
    <div class="a">a</div>
    <div class="b">b</div>
  </div>
  <div class="box box2">
    <div class="c">c</div>
    <div class="d">d</div>
  </div>
</div>

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

---

Если вы открыты для изменения HTML, вы можете сделать этокак показано ниже:

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  border:2px solid;
  box-sizing:border-box;
}
body {
 margin:0;
}
.container {
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a,.b,.c,.d {
  height: 50%;
  width:50%;
}

@media all and (max-width: 500px) {
  .a,.b,.c,.d {
    width:100%;
    height:25%;
  }
  .b {
    order:2;
  }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

И с сеткой CSS:

.container > * {
  color: white;
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing:border-box;
  border:2px solid;
}
body {
 margin:0;
}
.container {
  display: grid;
  grid-template-areas:  
    'a b'
    'c d';
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-gap:10px;
  min-height: 100vh;
  background:blue;
  padding:10px;
  box-sizing:border-box;
}

.a {
  grid-area:a;
}
.b {
  grid-area:b;
}
.c {
  grid-area:c;
}
.d {
  grid-area:d;
}

@media all and (max-width: 500px) {
  .container {
   grid-template-areas:  
    'a'
    'c' 
    'd'
    'b';
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
   }
}

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
</div>

Answer 2

Если вы заказываете ваши дивы как .a & .c в .box1 и .c & .d в .box 2, вы можете использовать столбец в .container для рабочего стола и столбец в .boxв мобильном телефоне + заказ в течение .box2:

.box {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100vw;
  display: flex; /* <-- */
}

.container {
  display: flex;
  height: 100vh;
  flex-direction: column; /* <-- */
}

.a, .b, .c, .d {
  height: 50%;
}

@media all and (max-width: 500px) {
  .box {
    height: 50vh;
    flex-direction: column; /* <-- */
  }

  .box2 .d {
    order: 0; /* <-- */
  }
}

   <div class="container">
    <div class="box box1">
      <div class="a">a</div>
      <div class="c">c</div>
    </div>
    <div class="box box2">
      <div class="b">b</div>
      <div class="d">d</div>
    </div>
  </div>

Answer 3

Комментарий Нури Кацуки прав.Если div "abcd" находятся на одном уровне, вы можете использовать свойство CSS order, чтобы достичь желаемого порядка на мобильном устройстве.

Кроме того, flex-wrap: wrap заставляет дочерние элементы переходить в столбцы по запросу на рабочем столе

Я отредактировал ваш пример, чтобы проиллюстрировать его:

.container {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);

  width: 100vw;
  
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: wrap;  
}

.a { background:#e67e22;}
.b { background:#e74c3c;}
.c { background:#9b59b6;}
.d { background:#34495e;}


.a, .b, .c, .d {
  height: 50%;
  width: 50%;
}

@media all and (max-width: 500px) {
  .container {
    height: auto;
  }
  .a, .b, .c, .d { width: 100%; }
  .b {
    order: 3;
  }
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

/* Some default styles to make each box visible */
html,body {
  padding: 0;
  margin: 0;
}

.container {
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);

  width: 100vw;
  
  display: flex;
  height: 100vh;
  align-items: stretch;
  flex-direction: column;
  flex-wrap: wrap;
}

.a { background:#e67e22;}
.b { background:#e74c3c;}
.c { background:#9b59b6;}
.d { background:#34495e;}

.a, .b, .c, .d {
  height: 50%;
  width: 50%;
}

@media all and (max-width: 500px) {
  .container {
    height: auto;
  }
  .a, .b, .c, .d { width: 100%; }
  .b {
    order: 3;
  }
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>