javascript - bootstrap 3 box layout not responsive

Question

I am trying to make a bootstrap4 layout that has 3 boxes side by side on a wide screen, but if the screen gets thinner I want the red/green boxes to always stay next to each other, and the far right blue box to move below the first two boxes like so in this pic:

I'm new to the bootstrap4 column layout, and I've been working on trying to achieve this but my current work in progress code does not have the responsiveness I want:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<div class="container">
    <div class="row">
        <div style="background:red" class="col-md-3">
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          
        </div>
        <div style="background:green" class="col-md-3">
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          
        </div>
        <div style="background:blue" class="col-md-3">
          TEXT3 <br>
          TEXT3 <br>
          TEXT3 <br>
        </div>
      </div>
</div>

question from:https://stackoverflow.com/questions/65926613/bootstrap-3-box-layout-not-responsive

Answer 1

You can add multiple col-* classes to your elements. This way you can set multiple different layouts for different screen sizes.

For example, you'll want 2 columns side by side and 1 full width on smaller screens. Bootstrap is considered mobile first so start off with the smaller layouts and work your way up. The smallest screen columns are defined with col-* (without any sm or md, etc).

<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-12"></div>

The two columns will each be 1/2 starting from the smallest screen size to the largest. The third div will be 1/1 of the width. Now to make your layout more complex, you can added classes to the elements, like having them become 1/3 of the width of a row on a larger screen.

<div class="col-6 col-md-4"></div>
<div class="col-6 col-md-4"></div>
<div class="col-md-4"></div>

This will put all three columns in a single row on larger screens. They are all 1/3 the width so they will fit together. Note that col-12 has been removed. This is because col-md-4 will imply the usage of col-12 when the screen is smaller than its breakpoint.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div style="background:red" class="col-6 col-md-4">
      TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br>

    </div>
    <div style="background:green" class="col-6 col-md-4">
      TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br>

    </div>
    <div style="background:blue" class="col-md-3">
      TEXT3 <br> TEXT3 <br> TEXT3 <br>
    </div>
  </div>
</div>