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>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>