Bootstrap 4 card layout width not consistent [duplicate] - html

Question

This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
My page has three cards in it as shown in image 1. The cards are not the same width in columns 1. When testing it on the mobile (Chrome) they are all different widths and the bottom two cards are touching as shown in image 2.
How do I get the columns on the left to be the same width and maintain responsiveness and size when on mobile? I'm expecting uniform width and height on both web and mobile.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
<div class="col-lg-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">More Numbers</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Some stuff</h6>
</div>
<div class="card-body" style="font-size: small;">
My Content
</div>
</div>
</div>
</div>
Layout on web page:
The layout on mobile:
https://www.codeply.com/go/Fia8Y6YPNl

Answer 1

You're breaking the bootstrap rule of always having div.col-* being a child of a div.row. A div.col-* cannot be a direct child of another div.col-*. This is likely your issue.
Try this:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card rounded-0">
<div class="card-header">
<h6 class="mb-0">Numbers</h6>
</div>
<div class="card-body" style="font-size: small; overflow-y: scroll;">
My Content
</div>
</div>
</div>
</div>
</div>