title: Bootstrap 4 how to push 2nd col to next row when 1st col has a lot of text
body: <p>I'm pretty close, but the only problem is that the long text in the first col does not wrap.  It overflows it's parent "row". </p>
  
  <p><a href="https://www.bootply.com/qMLny5rRIW#" rel="nofollow noreferrer">https://www.bootply.com/qMLny5rRIW#</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row "&gt;
      &lt;div class="col-auto bg-success"&gt;Lots of text - asdfd adf adf  adf akljl;kj  adffdaasd kj; jad adsfasdf adsf;kj  asdfasdf a sdf adf asdf adf kl;j ;lk j jk;;j ;kl j j;k ;lj ; jklj ;jk ;j ;j  ;jk ;j k;k  ; ;kjasdfasdfj;k asdfasdf asdfasdf asdf asdfasdfasdf&lt;/div&gt;
      &lt;div class="col bg-warning text-right"&gt;pushed to other line&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-auto bg-success"&gt;small amount of text&lt;/div&gt;
      &lt;div class="col bg-warning text-right"&gt;same line&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the bootply example, the first row with minimal text looks perfect. Col 2 stays in the same row, next to col 1.   The second row, is very close but this is my issue.  Col 2 goes down to the next row, which is what I want, but col 1 does not wrap and overflows it's row. How do I get the text in col 1 to wrap?</p>