Bootstrap 4, как переместить 2-й столбец в следующий ряд, когда в 1-ом столбце много текста

Question

Я довольно близок, но единственная проблема в том, что длинный текст в первом столбце не переносится.Он переполняет родительский «ряд».

https://www.bootply.com/qMLny5rRIW#

<div class="container">
  <div class="row ">
    <div class="col-auto bg-success">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</div>
    <div class="col bg-warning text-right">pushed to other line</div>
  </div>
  <div class="row">
    <div class="col-auto bg-success">small amount of text</div>
    <div class="col bg-warning text-right">same line</div>
  </div>
</div>

В примере с начальной загрузкой первая строка с минимальным текстом выглядит идеально.Колонка 2 остается в том же ряду, рядом со колоном 1. Второй ряд очень близок, но это моя проблема.Столбец 2 переходит к следующему ряду, что я и хочу, но столбец 1 не переносится и переполняет свой ряд.Как получить текст в столбце 1 для переноса?

Answer 1

Вы ищете Flexbox Утилиты для роста и сжатия , которые были добавлены в Bootstrap 4.1.Используйте flex-shrink-1, который скажет col-auto «сжать» при необходимости, но не переполнить родительский .row:

https://www.bootply.com/TFE5hRTYcD

<div class="container">
  <div class="row ">
    <div class="col-auto flex-shrink-1 bg-success">Lots of text - asdfd adf adf  adf akljl;kj  adffdaasd kj; jad adsfasdf adsf;kj ...</div>
    <div class="col bg-warning text-right">pushed to other line</div>
  </div>
</div>

Codeply demo