As a newcomer to using bootstrap CSS, I am facing challenges in creating a screen layout. My goal is to have a row with two columns that stretch all the way down the available screen and are responsive. Additionally, I want a div in the second column always positioned at the bottom. For reference, please take a look at the image linked below. Any assistance on this matter would be greatly appreciated.https://i.sstatic.net/xhdzf.png
This is what I have tried so far:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 bg-danger">
left
<ul>
<li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]">{{x}}</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 bg-info">
right
<div>
<ul>
<li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]"> content {{x}}</li>
</ul>
</div>
<div class="nav bg-warning">nav</div>
</div>
</div>
</div>