title: how to wrap element when width is less than max width?
body: <p>I want to show <code>two column</code> layout or <code>two box in a row</code> when with is more than <code>600px</code> .but when width is less than 600 it should come <code>1 below another</code> or other words to wrap the <code>box</code></p>
  
  <p>here is my code</p>
  
  <p><a href="https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css:182-396" rel="nofollow noreferrer">https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css:182-396</a></p>
  
  <pre><code>&lt;div class="abc"&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
        &lt;div class="card"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  .abc {
    display: flex;
    max-width: 600px;
    justify-content: space-around;
    flex-wrap: wrap;
    border: 2px dotted pink;
  }
  .card {
    padding: 100px;
    background-color: aqua;
    border: 2px solid;
    margin: 5px;
  }
  </code></pre>
  
  <p>my issue is it is not wrapping the box when width is less than <code>600</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/Yd9dN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yd9dN.png" alt="enter image description here"></a></p>