求助：如何实现CSS Grid响应式布局从横向两格改纵向堆叠

我花了9小时写这段简易代码，始终达不到目标，试了大量教程也没进展，复制修改的代码都不管用。这是我的学习页面，想要给不同设备实现Grid响应式布局，把当前的横向两格布局改成纵向堆叠效果。我附上了当前与期望效果的截图：

现有代码如下：

HTML代码 #

<div class="container">
    <div class="top">
        <div class="t_e1"></div>
        <div class="t_e2"></div>
        <div class="t_e3"></div>
    </div>
    <div class="main"></div>
    <div class="bottom">
        <div class="b_e1"></div>
    </div>
</div>

CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    width: 100fv;
    background-color: brown;
}
.container {
    min-height: 100%;
    background-color: aquamarine;
    grid-template-columns: 1fr 1fr;
    display: grid;
}
    .top {
        background-color: blue;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
}
        .t_e1 {
            background-color: antiquewhite;
            display: grid;
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
}
    .main {
        background-color: blueviolet;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 5;
}
    .bottom {
        background-color: chartreuse;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
}
        .b_e1 {
        background-color: coral;
        display: grid;    
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 6;
}

恳请有人讲解该响应式效果的实现方法。

内容的提问来源于stack exchange，提问作者user20045789