html - 如何在较小的屏幕上重新定位一些 block ？

Question

我有一个看起来很普通的 html 和 css 布局:一个大的内容行和侧边栏。

看这里。第 1、2、3 block 进入主要部分，第 4、5、6 block 进入侧边栏。现在我想做的是在较小的屏幕上重新定位这些 block - 比如在平板电脑上。

所以我就在犹豫怎么把那个蓝色方 block 放在4和5的底部。到目前为止，我尝试使用 flex 创建它，但它似乎很难，因为结构不允许这样做。

Here is codepen example

#wrapper {
  display: flex;
  width: 100%;
/*   height: 320px; */
  border: 1px solid black;
}

#col1 {
  flex-basis: 80%;
}

#col2 {
  flex-basis: 20%;
  position: relative
}

#another-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#wig1 {
  background-color: red;
  height: 80px
}
#wig2 {
  background-color: green;
  height: 150px
}
#wig3 {
  background-color: blue;
  height: 40px
}
#wig4 {
  background-color: yellow;
  height: 100px
}
#wig5 {
  background-color: purple;
  height: 100px
}
#wig6 {
  background-color: magenta;
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
}

<div id="wrapper">
  <div id="col1">
    <div id="wig1">1</div>
    <div id="wig2">2</div>
    <div id="wig3">3</div>
  </div>
  <div id="col2">
    <div id="another-wrapper">
      <div id="wig4">4</div>
      <div id="wig5">5</div>
      <div id="wig6">
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
        <span>6</span>
      </div>
    </div>
  </div>
</div>

Answer 1

这对于 CSS 网格来说是一项完美的工作:

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "one two" "three four" "five six";
}

.grid>div {
  border: solid 2px green;
}

.grid>div:nth-child(1) {
  background-color: lightblue;
  grid-area: one;
}

.grid>div:nth-child(2) {
  background-color: yellow;
  grid-area: two;
}

.grid>div:nth-child(3) {
  background-color: lightgreen;
  grid-area: three;
}

.grid>div:nth-child(4) {
  background-color: khaki;
  grid-area: four;
}

.grid>div:nth-child(5) {
  background-color: teal;
  grid-area: five;
}

.grid>div:nth-child(6) {
  background-color: brown;
  grid-area: six;
}

@media screen and (max-width: 500px) {
  .grid {
    grid-template-areas: "one one" "two two" "four six" "five six" "three six";
    grid-template-columns: 1fr 3fr;
  }
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>