Bootstrap 4卡布局宽度不一致

Question

我的页面中有3张卡片，如图1所示。这些卡片的宽度在第1列中不相同。在移动设备（Chrome）上进行测试时，它们的宽度各不相同，并且底部的两张卡片都如图所示在图2中。

在移动设备上，如何使左侧的列具有相同的宽度并保持响应性和大小？我期望网络和移动设备上的宽度和高度都一致。

我的代码是：

<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>

网页布局：

移动设备上的布局：

https://www.codeply.com/go/Fia8Y6YPNl