My goal is to have 4 divs that change in width at different resolutions, but for some reason it's not working.
I am looking for:
- When the resolution is
≥992px, the divs should be in the same line (3 columns) - When the resolution is
≥768px, the divs should be in 2 lines - the first three divs on the first line with 4 columns and the last div on the second line with 12 columns - For resolutions less than that, the divs should be in 2 lines - the first and second with 6 columns each and the third and fourth with the same
However, I am facing an issue with the last resolution, <768px. It seems like only the col-lg and col-md resolutions are being applied...
If I remove the col-md resolution, then the col-6 resolution starts working! I'm confused and unsure how to proceed.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d766b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<body class="container-fluid">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-danger">Div1 respon</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-primary">Div2 respon</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-success">Div3 respon</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-3 bg-secondary">Div4 respon</div>
</div>
</body>