bootstrap 4 nested column not stacking - django

Question

new to bootstrap and experimenting on a pet project. am a bit at my wits ends here.
my understanding is if you have <div class="col-sm-12 col-lg-5"> and <div class="col-sm-12 col-lg-7 "> on small screen each would take a new row (12 cols). vs on a large screen they'd share the row (5+7). in my code the second table(fruits) is supposed to share row with the chart on large screens and split on small screen but when I try small screens in debugging mode, the second column with the chart gets pushed out of the parent column (off screen). I have no clue what exactly is wrong here. any help would be appreciated
bellow is a portion of the code
<div class="container">
<div class="row">
<div class="media content-section col-sm-12 col-md-12 col-lg-12">
<form action="" method="post">
{% csrf_token %}
<label class="switch"
><input type="checkbox" id="togBtn" />
<div class="slider round">
<!--ADDED HTML --><span class="on">BUY</span
><span class="off">SELL</span
><!--END-->
</div></label
>
<div class="table-responsive-md">
<table class="table table-sm table-bordered tableformat">
<thead>
SUMMARY
<small class="text-muted"
>(edit cells to adjust position)</small
>
<tr>
<th scope="col">col 1</th>
<th scope="col">col 2</th>
<th scope="col">col 3</th>
<th scope="col">col 4</th>
<th scope="col">col 5</th>
<th scope="col">col 6</th>
<th scope="col">col 7</th>
<th scope="col">col 8</th>
<th scope="col">col 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
placeholder="1"
size="10"
/>
</td>
<td width="60">
<input
type="text"
maxlength="10"
width="50%"
size="10"
placeholder="2"
/>
</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md">
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
update position
</button>
<button
type="button"
class="btn btn-primary btn-sm"
type="submit"
>
reset to default
</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="media content-section col-sm-12-col-md-12 col-lg-12">
<div class="col-sm-12 col-lg-5">
<div class="table-responsive-md">
<table
class="table table-sm table-bordered tableformat text-center"
>
<thead>
fruits
<small class="text-muted"
>(hover on terms for quick definitions)</small
>
<tr>
<th scope="col">mango</th>
<th scope="col">banana</th>
<th scope="col">apple</th>
<th scope="col">peach</th>
<th scope="col">grapes</th>
<th scope="col">lemon</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="chart col-sm-12 col-lg-7 overflow-auto">
<div style="width: 560; height: 400;">
<canvas id="plchart"></canvas>
</div>
</div>
</div>
</div>
here is how it looks in debugging mode on large screen vs on small screen. I have in the meta tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Answer 1

solved it. I missed the inner row before the cols.
essentially should be something like container->row->outer col->inner row -> inner-cols. I was doing container->row-> outer col -> inner cols