html - 如何在较小的屏幕上重新放置某些块？

我有一个HTML和CSS布局，看起来非常常见：一个大的内容行和侧边栏。

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

所以我只是在犹豫如何把蓝色方块放在4和5的底部。
到目前为止，我试图使用flex创建它，但它似乎很难，因为structure不允许这样做。
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>

最佳答案

这是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>