html - My Bootstrap 4 responsive column layout not working

Question

So I made a very simple responsive website layout using Bootstrap 4 so according to the code the no of columns should become 4 when it enters tablet mode ie when the viewport is 768px wide while mine is fine up to 770px showing 4 columns but when it becomes 769px it switches into smartphone mode and take the entire width and stacks on top of each other.

<div class="row">
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
    col
  </div>
</div>

Answer 1

Unlike Bootstrap 3, Bootstrap 4 has a bit different grid system. Here sm starts to act since <768px. and the xs breakpoint now is just col. Here, rewritten a bit.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
    <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
      col
    </div>
  </div>
</div>