Line Break Bootstrap 4

Question

Hello. I’m building a Dashboard with Bootstrap 4 and I came across a very troublesome problem: when I arrive at the breakpoint determined for the line to break (flex-sm-wrap), it breaks normally, but when the resolution gets smaller, all content inside the Row goes back to the same line, and the columns' Ivs should continue on top of each other in the lower resolution.

         <div class="container cont1">

            <div class="d-flex flex-row justify-content-center mt-5 flex-sm-wrap ">

                <div class="principal_01 col-xs-12 col-sm-12 col-md-7 col-lg-7 border">DIV1</div>

                <div class="principal_02 col-xs-12 col-sm-12 col-md-5 col-lg-4 ml-lg-5 border">
                    <div class="row space"></div>
                        <div class="line1-1">
                            <div class="col-auto">DIV2</div>
                        </div>
                    <div class="row space"></div>
                        <div class="line1-1">
                            <div class="col-auto">DIV3</div>
                        </div>
                </div>

            </div>
        </div>

I’ve tried to use clearfix between the principal_01 and principal_02, however, nothing happens. In CSS I only have some definitions of height and background color, which I have already removed/modified and persists with the problem.

Answer 1

Change flex-sm-wrap for flex-wrap flex-md-nowrap

That way when it’s bigger than SM does not break, and whenever it is SM or less will break

Code of the image above

<div class="container cont1">

  <div class="d-flex flex-row justify-content-center mt-5 flex-wrap flex-md-nowrap">

    <div class="principal_01 col-xs-12 col-sm-12 col-md-7 col-lg-7 border">DIV1</div>

    <div class="principal_02 col-xs-12 col-sm-12 col-md-5 col-lg-4 ml-lg-5 border">
      <div class="row space"></div>
      <div class="line1-1">
        <div class="col-auto">DIV2</div>
      </div>
      <div class="row space"></div>
      <div class="line1-1">
        <div class="col-auto">DIV3</div>
      </div>
    </div>

  </div>
</div>