My goal is to create a 6-column layout for desktop and larger screens, but I want it to collapse into 4 columns for laptops. However, when using the code below, the grid does not collapse at the expected breakpoint. I even tried changing the class to "container-fluid" but it didn't work. I can't seem to make it behave as intended.
<div class="row" id="content">
<div class="col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-md-3 col-lg-2 d-flex justify-content-center">
</div>
<div class="col-lg-2 d-flex justify-content-center">
</div>
</div>
I'm not sure if this matters, but the div is styled with the CSS snippet below:
#content div{
min-height: 350px;
}