如何在嵌套行上设置断点 Bootstrap

Question

我目前正在学习制作一个响应式网站。我很困惑当屏幕尺寸改变时如何设置内容的断点。这就是我想做的：

下面的代码仅适用于桌面尺寸：

             <div className="row wrapper-about">
                <div className="col-lg-6 col-md-6 col-6">                  
                    <div className="img-box">
                      <img src="/pp1.jpg" alt="foto.jpg" />
                    </div>
                </div>
               <div className="col-lg-6 col-md-6 col-6">
                  <div className="row">
                      <div className="desc-container">
                        <h5 className="text-justify">
                          Content 2
                        </h5>
                      </div>
                  </div>
                  <div className="row desc2-d">
                      <span>
                        Content3                   
                      </span>
                  </div>
                </div>
             </div>

Answer 1

获得此布局的最简单方法（无需额外的 CSS 或重复标记）是针对较大的屏幕宽度禁用 Flexbox 并使用 float utils：

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

<div class="container">
    <div class="row d-md-block">
        <div class="col-6 col-md-8 float-left border border-danger c1">
        c1
        </div>
        <div class="col-6 col-md-4 float-left border border-success">
        c2
        </div>
        <div class="col-12 col-md-4 float-left  border border-warning">
        c3
        </div>
    </div> 
</div>

类似的问题之前已经回答过：

重新排列响应式 Bootstrap 4 网格布局
Bootstrap 在移动版本上具有不同的顺序
桌面上一个高的 div 旁边是两个较短的 div，并使用 Bootstrap 4 堆叠在移动设备上
Bootstrap 4 - 堆叠 2 列，右侧有 1 个大列