Bootstrap 4实现：桌面端一高两短Div并排，移动端重排堆叠

我来帮你搞定这个响应式布局的需求！结合你给出的代码片段，我用Bootstrap的网格系统和排序类实现了符合要求的效果，具体如下：

核心思路 #

用Bootstrap的列布局实现桌面端的并排效果，再通过响应式排序类order-*控制移动端的堆叠顺序，同时用间距类优化不同屏幕下的显示质感。

完整代码实现 #

const Main = () => (
  <section className="" id="section-2">
    <div className="container">
      <div className="row">
        {/* 右侧第一个短Div - 移动端排最前面 */}
        <div className="col-12 col-md-4 order-1 order-md-2">
          <div className="bg-light p-4 mb-3 mb-md-0">
            短Div 1
          </div>
        </div>

        {/* 高Div - 桌面端占左侧大宽度，移动端在中间 */}
        <div className="col-12 col-md-8 order-2 order-md-1">
          <div className="bg-primary text-white p-5" style={{ minHeight: '300px' }}>
            高Div（高度覆盖右侧两个短Div总和）
          </div>
        </div>

        {/* 右侧第二个短Div - 移动端排最后 */}
        <div className="col-12 col-md-4 order-3 order-md-2">
          <div className="bg-light p-4 mt-3 mt-md-0">
            短Div 2
          </div>
        </div>
      </div>
    </div>
  </section>
);

细节说明 #

• 桌面端效果：
  高Div用col-md-8占据8列宽度，右侧两个短Div各占4列（col-md-4），通过order-md-2让它们在桌面端处于同一列区域，自然上下堆叠在高Div右侧，完美实现「一个高Div紧邻两个短Div」的布局。
• 移动端效果：
  利用order-1/order-2/order-3重新调整顺序，让第一个短Div排最上面，高Div在中间，第二个短Div在最后；同时col-12让所有Div在移动端占满整行，自动堆叠起来。
• 间距优化：mb-3 mb-md-0和mt-3 mt-md-0是为了在移动端给Div之间留出合适的上下间距，桌面端则去掉这些间距，保持紧凑的并排效果。
• 高度控制：给高Div设置minHeight是为了确保它的高度能覆盖右侧两个短Div的总高度，你可以根据实际内容调整这个数值，或者让它随内容自动拉伸。

自定义小技巧 #

• 如果需要不同的移动端排序，只要改order-*的数值就行，数值越小，位置越靠前。
• 想调整桌面端的宽度比例？直接修改col-md-*的数字，比如把高Div改成col-md-7，右侧两个改成col-md-5就行。
• 背景色、内边距这些样式，完全可以换成你自己的自定义类或者设计需求的样式，我这里只是用基础样式做示例。

内容的提问来源于stack exchange，提问作者Matthew Benjamin