Как изменить порядок потока DOM - PullRequest
Новая
       95

Как изменить порядок потока DOM

0 голосов
/ 04 мая 2020

У меня следующая проблема с макетом. 4 блока один за другим a1, b1, a2, b2 в столбце на мобильном телефоне. На рабочем столе я хочу получить a1, a2, b1-b2, то есть a1, затем a2, а затем b1-b2 в той же строке, но ниже a2. Я надеялся использовать flexbox, но не уверен, как go об этом.

mobile: 

<div style='display:flex;flex-direction:column>
    <div id='a1'></div>
    <div id='b1'></div>
    <div id='a2'></div>         //each of these is 100VW
    <div id='b2'></div>
 </div>

desktop: 

    <div id='a1'></div>      // the first two are 100vw
    <div id='a2'></div>
    <div id='b1'></div><div id='b2'></div>  //each of these would be 50vw

Есть ли способ сделать это с одной версией html и изменить только css?

1 Ответ

1 голос
/ 04 мая 2020

Сетка будет проще, но это возможно и с flexbox.

flex 

article {
  display: flex;
  flex-wrap: wrap;
}

#a1 { order: 1; }
#a2 { order: 2; }
#b1 { order: 3; }
#b2 { order: 4; }

div {
  flex: 0 0 100%;
  background-color: lightgreen;
  margin-bottom: 5px;
}

#b1, #b2 {
  flex: 1 0 34%; /* allows max 2 items per row, with ample space for margins */
}

#b2 {
  margin-left: 5px;
}

@media ( max-width: 500px) {
  article {
    display: block;
  }
  #b2 {
    margin: 0;
  }
}
<article>
  <div id='a1'>a1</div>
  <div id='b1'>b1</div>
  <div id='a2'>a2</div>
  <div id='b2'>b2</div>
</article>

jsFiddle demo

grid 

article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  grid-template-areas:
    " a1 a1 "
    " a2 a2 "
    " b1 b2 "
}

#a1 {
  grid-area: a1;
}

#a2 {
  grid-area: a2;
}

#b1 {
  grid-area: b1;
}

#b2 {
  grid-area: b2;
}

@media (max-width: 500px) {
  article {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a1""b1""a2""b2";
  }
}

div {
  background-color: lightgreen;
}
<article>
  <div id='a1'>a1</div>
  <div id='b1'>b1</div>
  <div id='a2'>a2</div>
  <div id='b2'>b2</div>
</article>

jsFiddle demo

...