如何用Bootstrap实现符合预期的响应式布局？代码问题求助

我想要实现一种响应式布局：

• 大屏设备上：左侧是区块A，右侧是上下排列的区块B和C（B在上，C在下，均占右侧容器宽度）
• 中屏设备上：区块A占整行，下方是左右排列的区块B和C（各占一半宽度）

我的代码如下：

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6">
            A
        </div>
        <div class="col-12 col-sm-6">
                <div>
                    B
                </div>
                <div class="col-md-12">
                    C
                </div>
        </div>
    </div>
</div>

但这段代码未达到预期效果，请问该如何修改？

问题所在 #

原代码有两个关键问题：

• 右侧容器里的B和C没有用row包裹，Bootstrap的栅格系统要求col必须放在row内才能正确生效，否则col-md-12起不到布局作用。
• 没有针对中屏（md断点，一般是≥768px）设置对应的栅格类，无法实现A独占一行、B和C左右分栏的中屏布局。

修正后的代码（Bootstrap 4/5通用） #

<div class="container">
    <div class="row">
        <!-- 大屏占6列（半宽），中屏及以下占12列（整行） -->
        <div class="col-md-6 col-12">
            A
        </div>
        <!-- 大屏占6列（半宽），中屏及以下占12列（整行） -->
        <div class="col-md-6 col-12">
            <div class="row">
                <!-- 大屏占12列（父容器内整宽），中屏及以下占6列（半宽） -->
                <div class="col-md-12 col-6">
                    B
                </div>
                <div class="col-md-12 col-6">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

布局逻辑说明 #

• col-md-6：在大屏（≥768px）时占6个栅格列，也就是容器宽度的一半。
• col-12：在中屏及以下（<768px）时占满12列，也就是整行宽度。
• 右侧容器内的row是核心，用来包裹B和C，让它们的栅格类能正常工作，避免布局错乱。
• 大屏时B和C的col-md-12让它们在右侧容器内上下排列；中屏及以下时col-6让它们左右分栏，同时A已经独占一行，正好匹配需求。

内容的提问来源于stack exchange，提问作者Boidurja Talukdar