使用 CSS 以特定的数字顺序排列布局

Question

这是我使用 flex-box 的项目站点的当前布局。我想像下面 那样按升序排列这些框，但是当我点击移动屏幕时，我的左列首先被排列，然后是右列。有没有办法按照上面给出的顺序排序？

Answer 1

试试这个。我正在更改显示：从 flexbox 到最大宽度 800px 的网格

.container{
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 800px) {
  .container{
    display: grid;
    grid-template-areas: 
            "1"
            "2"
            "3"
            "4"
            "5"
  }
}
.first{
  grid-area: 1;
  width: 100px;
  height: 30px;
  border: 2px solid black;
  text-align: center;
}
.second{
  grid-area: 2;
  width: 100px;
  height: 30px;
  border: 2px solid black;
  text-align: center;
}
.third{
  grid-area: 3;
  width: 100px;
  height: 30px;
  border: 2px solid black;
  text-align: center;
}
.fourth{
  grid-area: 4;
  width: 100px;
  height: 30px;
  border: 2px solid black;
  text-align: center;
}
.fifth{
  grid-area: 5;
  width: 100px;
  height: 30px;
  border: 2px solid black;
  text-align: center;
}

<div class="container">
  <div class="column">
    <div class="first">First</div>
    <div class="third">Third</div>
  </div>
    <div class="column">
      <div class="second">Second</div>
      <div class="fourth">Fourth</div>
      <div class="fifth">Fifth</div>
  </div>
</div>