title: Flexbox two divs next each other and responsive
body: <p>I am creating an Layout for my project and I am working with Flexbox (see image and css style). Well it seems to be working but not for mobile. For example if I resise the screen then the columns will be resize but the right column (Map) is not jumping below the content. How can I do it?</p>
  
  <p><a href="https://i.stack.imgur.com/FK4Wj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FK4Wj.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;&lt;h1&gt;HEADER&lt;/h1&gt;&lt;/div&gt;
    &lt;div class="main"&gt;
        &lt;div class="leftSide"&gt;
            &lt;div class="menuItem"&gt;Menu Item&lt;/div&gt;
            &lt;div class="secondItem"&gt;Content&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="rightSide"&gt;
              &lt;div class="thirdItem"&gt;Map&lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>// Layout start page
  .container {
      display: flex;
      flex-direction: column;
  }
  
  .header{
      border: 5px solid yellowgreen;
  }
  
  .main{
     display: flex;
     flex-wrap: wrap;
  }
  .leftSide{
      flex:0 0 65%;
      border: 5px solid red;
  
  }
  
  .rightSide{
      flex: 1;
      border: 5px solid black; 
  }
  
  .menuItem {
      border: 5px solid purple;
  }
  </code></pre>