I successfully implemented 5 equal columns in Bootstrap for my responsive design using container-fluid. However, I encountered an issue when trying to hide one column at lower resolutions, which I also managed to solve. Now, the challenge lies in creating two rows with 4 equally sized columns each on mobile view. Unfortunately, my current code is not achieving this desired layout. Instead, it breaks down into a row with 3 columns and another row with only 1 column, mirroring the size of those 3.
Below is my existing Bootstrap code;
<div class="container-fluid content">
<div class="row">
<div class="col col-xs-6">
<div class="stats">
<div class="big">111</div>
<div class="small">COLUMN 1</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">222</div>
<div class="small">COLUMN 2</div>
</div>
</div>
<div class="col d-none d-md-block">
<div class="stats">
<div class="big">333</div>
<div class="small">COLUMN 3 (DISAPPEARS ON LOW RES)</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">444</div>
<div class="small">COLUMN 4</div>
</div>
</div>
<div class="col col-xs-6">
<div class="stats">
<div class="big">555</div>
<div class="small">COLUMN 5</div>
</div>
</div>
</div>
</div>
Any insights on what I may be overlooking? Thank you.