I'm using the following code to try and get the "expected" layout below but instead i'm getting the one in gray which is wrong. Can someone tell me what I'm doing wrong in using the Boostrap 4 grid system?
I don't get why the side-by-side columns are appearing on top of each other instead of next to each other?
I've tried setting padding and margin to zero.
<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>