title: Flex media queries: left-right to top-down
body: <p>Is there a way to make it 2 column on 767px and 1 column 480px? Is it possible to make flex same height when it turns to 1 column?</p>
  
  <p>This is what I have so far:</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>.col-container {
   display: flex;
   width: 100%;
  }
  .col-container&gt;.col {
   padding:10px;
   width:100%;
   margin:0;
  }
  .col:nth-child(odd) {
   background-color:green;
  }
  .col:nth-child(even) {
   background-color:blue;
  }
  
  @media only screen and (max-width: 767px) {
   .col-container { 
    flex-wrap: wrap;    
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-container"&gt;
   &lt;div class="col"&gt;
    &lt;h2&gt;Column 1&lt;/h2&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class="col"&gt;
    &lt;h2&gt;Column 2&lt;/h2&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
    &lt;p&gt;Hello World!&lt;/p&gt;
   &lt;/div&gt;
   
   &lt;div class="col"&gt;
    &lt;h2&gt;Column 3&lt;/h2&gt;
    &lt;p&gt;Some other text..&lt;/p&gt;
    &lt;p&gt;Some other text..&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This flex show four column </p>
  
  <p><img src="https://i.stack.imgur.com/ewfZj.jpg" alt="four column"></p>
  
  <p>to full width to 767px</p>
  
  <p><img src="https://i.stack.imgur.com/1P3zD.jpg" alt="one column"></p>