The first row is not responsive and there will be 4 columns for any breakpoints but the second row is responsive based on
md
and
lg
device sizes
<div class="container">
        <div class="row">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>

        <br><br><br>
        
        <div class="row">
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
        </div>
    </div>
by Valeri Tandilashvili
5 years ago
Bootstrap
responsive layout
Bootstrap v5: Getting Started (Buttons, Responsive Columns, Accordion)
2
Pro tip: use ```triple backticks around text``` to write in code fences