title: Why 2 col-12 divs do not wrap in Bootstrap 4?
body: <p>Two Bootstrap 4 cards with col-12 class are placed side-by-side and don't wrap, why??</p>
  
  <pre class="lang-html prettyprint-override"><code>
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 font header"&gt;
              i am header
          &lt;/div&gt;
          &lt;div class="col-sm-12 justify-content-center d-flex"&gt;
              &lt;div class="card col-sm-12 text-center w-75 mt-2"&gt;
                  &lt;div class="card-body d-flex justify-content-center "&gt;
  
                      &lt;input placeholder="Enter the link or search phrase" id="search" type="text" class="form-coltrol col-7"&gt;
                      &lt;button id="download" class="font btn btn-primary"&gt;
                          search
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card col-sm-12 text-center w-75 mt-2" style="background:silver"&gt;
                  &lt;div class="variants card-body d-flex justify-content-center "&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;div class="row"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-12 footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>also available at <a href="https://codepen.io/zzmaster/pen/gNEoaK" rel="nofollow noreferrer">https://codepen.io/zzmaster/pen/gNEoaK</a></p>