html - 如何在嵌套行上设置断点 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>

标签： htmlcssbootstrap-4responsive-designfrontend

Answer 1

获得此布局的最简单方法（无需额外的 CSS 或重复标记）是为更大的屏幕宽度禁用 flexbox 并使用浮动工具：

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
在移动版上具有不同顺序