I've implemented the code below in an attempt to achieve the desired layout shown in the image, but instead, I'm getting a different outcome. Can someone help me figure out what I might be doing wrong with the Boostrap 4 grid system?
I'm confused as to why the columns that should be side-by-side are displaying on top of each other rather than next to each other.
Even after trying to set the padding and margin to zero, the issue persists.
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12">
1
</div>
<div class="col-md-8 col-xs-12">
<div class="col-md-12">
<div class="col-md-2">
2.1
</div>
<div class="col-md-10">
<div class="col-md-12">
2.21
</div>
<div class="col-md-12">
2.22
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-2">
3.1
</div>
<div class="col-md-10">
<div class="col-md-12">
3.21
</div>
<div class="col-md-12">
3.22
</div>
</div>
</div>
</div>
</div>
</div>