title: Put div under another div with responsive design
body: <p>The HEADER div is the content of the website. Its width is 80% of the actual screen size, and it's positioned at the center of the screen too.</p>
  
  <p>This is the HTML Code. What I want is the "one" div to be above the "two" div when the screen size is smaller. When you open the website on the computer, the two divs must be next to each other, but for example when the window is 320px then the two divs must be  one on top of the other (just like the classic responsive designs) </p>
  
  <p>This is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header {
  width: 88%;
  margin: 0 auto;
  -webkit-box-shadow: -2px 2px 80px -10px #0B0B3B;
  -moz-box-shadow: -2px 2px 80px -10px #0B0B3B;
  box-shadow: -2px 2px 80px -10px #000;
  }
  
  .wrapper { 
    border : 2px solid #000; 
    overflow:hidden;
  }
  
  .wrapper div {
     min-height: 200px;
     padding: 10px;
  }
  #one {
    background-color: gray;
    float:left; 
    margin-right:20px;
    width:140px;
    border-right:2px solid #000;
  }
  #two { 
    background-color: white;
    overflow:hidden;
    margin:10px;
    border:2px dashed #ccc;
    min-height:170px;
  }
  
  @media screen and (max-width: 320px) {
      body {
          background-image: url("http://localhost/wordpress/wp-content/uploads/2018/07/max-width479.png");
      }
  
      #one { 
      float: none;
      margin-right:0;
      width:auto;
      border:0;
      border-bottom:2px solid #000;    
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt; 
      &lt;div class="wrapper"&gt;
         &lt;div id="one"&gt;one&lt;/div&gt;
         &lt;div id="two"&gt;two&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>