Html 从排列的 2 个网格到彼此下方的 2 个网格(响应性)

我花了9个多小时编写的简单代码，令人悲哀的现实.我try 了很多教程和页面，但即使是它们也无法帮助我.我复制/修改了我遇到的多行代码，但没有一行代码起作用.这只是一个学习页面，我正在try 为各种设备整合网格响应能力.

我在下面附上了屏幕，上面写着它是什么，以及我希望它是什么样子.

我相信这是一件很简单的事情，看看一些教程代码是如何由1/2行组成的，但它似乎仍然太多，我无法理解它.

下面的代码是正在进行的工作，响应似乎是今天的标准，如果有人能向我解释如何做到这一点，我将不胜感激.

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

* {
    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;
}

[Currently][1]
[Desired effect][2]

  [1]: https://i.stack.imgur.com/Vs0lR.jpg
  [2]: https://i.stack.imgur.com/wUH7H.jpg