I want to create a grid with 3 columns, each containing a nested grid with 2 columns (one smaller than the other).
When the breakpoint is reached, I want the columns to stack on top of each other. However, one of the nested columns disappears after the breakpoint.
This is the code I have used:
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css");
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 40px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f2edf2f2e7f0ace8f1c2b3acb3b4acb2">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<div class="row">
<div class="col col-lg-4">
icon
</div>
<div class="col col-lg-8">
text
</div>
</div>
</div>
<div class="col-lg">
<div class="row">
<div class="col col-lg-4">
icon
</div>
<div class="col col-lg-8">
text
</div>
</div>
</div>
<div class="col-lg">
<div class="row">
<div class="col col-lg-4">
icon
</div>
<div class="col col-lg-8">
text
</div>
</div>
</div>
</div>
</div>When the breakpoint is reached, nested columns stack up properly, but the parent columns do not. The main issue I am facing is that the column with the icon disappears completely after the large breakpoint.
I would like the layout to look like this once the large breakpoint is reached:
Nested layout once breakpoint is reached
However, this is what actually happens:
Screen record of my layout on my website
Since this is my first time using Bootstrap, I understand that I may be making a mistake. Can anyone point out where I might be going wrong?