Make boxes stack when the screen gets to small (CSS/HTML)

I got some boxes on my site and I want them to stack above each other when the screen is getting to small, instead of the boxes just getting smaller.

So thats how my site looks right now:enter image description here

And if I make the screen smaller it looks like this: enter image description here

But what I want to accomplish is, that the boxes keep their height and start stacking underneath eachother when the screen is getting smaller. What do I have to do, to accomplish this?

My code:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

/* Navbar */

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
  .topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
}
.menu a {
  background-color:red;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}

/* Hauptboxen */

.mainboxcontainer {
  width:100%;
    text-align:center;

}
.mainbox1 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: yellow;
}

.mainbox2 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: purple;
}

.mainbox3 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: green;
}


.mainbox4 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: green;
}

.mainbox5 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: yellow;
}

.mainbox6 {
  float:left;
  width:33.3%;
  min-height: 15vh;
  padding:0 20px;
  background-color: purple;
}


</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">Webdesign</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">Über uns</a>
    <a href="#about">Kontakt</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div class="mainboxcontainer">
  <div class="mainbox1">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox2">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox3">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox4">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox5">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="mainbox6">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</div>



<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
</html>

Thanks alot for your help

Greeting Samuel

Thanks alot guys for your help!

Yeah I'm new to coding websites and just realized the redundancy of my code - sorry for that.

For demonstration purposes I want to achieve an effect like on the following site: www.portfoliozora.ch

If you scale down the website than the containers go down to a minimum size, below that defined size, they start stacking underneath.

My plan was to define minimum and maximum width and height for the containers. Is this the right way to do it?

As I already said, I started coding responsive websites like two days ago, and I want to visualize and learn by "learning by doing". So if you guys could lead me on the right path, to accomplish the desired effect, I would be very grateful.

I also tried to do it with the @media tag and defining a minimum width and height, but that doesn't work either. What am I doing wrong?

Thanks Samuel

Solution

Please check this code. Your code had a lot of duplicates. I just optimized it and added box-sizing: border-box;. So that it will work the way you wanted. Please check it and let me know.

 .menu a {
     background-color: red;
     padding: 8px;
     margin-top: 7px;
     display: block;
     width: 100%;
     color: black;
 }

 /* Hauptboxen */

 .mainboxcontainer {
     width: 100%;
     text-align: center;
 }

 .mainbox {
     float: left;
     width: 33.3%;
     min-height: 15vh;
     padding: 0 20px;
     box-sizing: border-box;
 }

 .mainbox1 {
     background-color: yellow;
 }

 .mainbox2 {
     background-color: purple;
 }

 .mainbox3 {
     background-color: green;
 }

 .mainbox4 {
     background-color: grey;
 }

 .mainbox5 {
     background-color: yellow;
 }

 .mainbox6 {
     background-color: purple;
 }

 @media screen and (max-width: 600px) {
     .mainbox {
         width: 50%;
     }
 }

<div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">Webdesign</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">Über uns</a>
    <a href="#about">Kontakt</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
    <h1>Hello World</h1>
</div>

<div class="mainboxcontainer">
    <div class="mainbox1 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox2 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox3 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox4 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox5 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>

    <div class="mainbox6 mainbox">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
            magna aliquam erat volutpat.</p>
    </div>
</div>