Position div below the other after decreasing browser

To put div side by side and break the line when resizing use:

 #teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: right;
    width: 200px;
    height: 100px;
    background-color:black;
}

Example: link

To leave them aligned when you break the line you can do this:

<header id="header" style="width: 100%;">
      <div id="teste"></div>
      <div id="divWrapper"></div>
      <div class="teste2"></div>
</header>

#divWrapper {
    height: 100px;
    float: left;
    clear: right;
    /* Standard */
    width: calc(100% - 400px);
    /* Firefox */
    width: -moz-calc(100% - 400px);
    /* WebKit */
    width: -webkit-calc(100% - 400px);
    /* Opera */
    width: -o-calc(100% - 400px);
}

#teste {
     float: left;
     width: 200px;
     height: 100px; 
     background-color: red;
}

.teste2 {
    float: left;
    width: 200px;
    height: 100px;
    background-color: black;
}

Example: link

Just add a Media Query, for example, this code will make the div position below when the screen size is at most 720px.

@media screen and (max-width: 720px) {
     .teste2, #teste {
         width:100%;
         float:left;
     }
     .teste2 {
         margin-top:0;
     }
 }

See it working clicking here

You can further understand Media Query working here .

One solution would be to use media queries, something like:

@media screen and (min-width:600px) {
   /* Dizer aqui que o tamanho das divs devem ocupar uma largura de 100%, assim uma ficaria em baixo da outra*/

   #teste{
     width: 100%;
   }
   #teste2{
      width: 100%;
   }
}

I do not know if it is feasible for you but I like to use Bootstrap in such cases, streamlines the development and looks more beautiful in my opinion, take a look at the Grid System you will understand what I am talking about. p>

link