From 2 grids in line, to 2 grids below each other (responsiveness)

Simple code that took me +9 hours to make, sad reality. I tried a lot of tutorials and pages, but even they are unable to help me. I copied/modified multiple lines of code that I came across, but none does anything. This is just a learning page, where I’m trying to incorporate grid responsiveness for variety of devices.

I attached screens below, with how it is, and how I want it to be.

I believe it is quite simple thing to do, seing how some tutorial code consists of 1/2 lines, but it still seems too much for me to comprehend it.

Code below is work in progress, and responsiveness seems to be todays standard, and if anyone can explain to me how to do it, I will be grateful.

<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

>Solution :

This is my solution:

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


/*new code from here*/

@media (max-width: 640px) {
  .top,
  .bottom {
    display: flex;
    flex-direction: column-reverse;
  }
  .t_e1,
  .t_e2,
  .t_e3,
  .b_e1 {
    display: block;
  }
  .t_e1,
  .b_e1 {
    height: 15vh;
  }
}

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

The media query can set to the desired "screen size" you want your responsive look to appear.