Bootstrap 4 Alpha版响应式布局：桌面与移动端列特殊排列需求

没问题！我帮你用纯CSS（结合Bootstrap 4 Alpha的响应式工具类）搞定这个布局需求，完全不用JavaScript，不会影响你的重型组件~

实现思路 #

核心是利用Bootstrap 4的响应式order类控制不同屏幕下的列顺序，再通过设置列3的最小高度让它跨两行，配合flexbox的自动换行特性实现桌面端的布局。

完整代码 #

HTML部分

<div class="container">
  <div class="row">
    <!-- 列1：全屏幕col-12，桌面端col-4 -->
    <div class="col-12 col-md-4 box">1</div>
    <!-- 列2：同列1 -->
    <div class="col-12 col-md-4 box">2</div>
    <!-- 列3：移动端order:1（排在4前面），桌面端order:2（排在4后面），设置最小高度跨两行 -->
    <div class="col-12 col-md-4 box order-1 order-md-2" style="min-height: 250px;">3</div>
    <!-- 列4：移动端order:2（排在3后面），桌面端order:1（排在3前面），桌面端col-8 -->
    <div class="col-12 col-md-8 box order-2 order-md-1">4</div>
  </div>
</div>

CSS部分

.box {
  border: 1px solid #2c3e50;
  padding: 1.5rem;
  background-color: #ecf0f1;
  margin-bottom: 1rem; /* 移动端列之间的间距 */
}

/* 桌面端移除列间距，让布局更紧凑 */
@media (min-width: 768px) {
  .box {
    margin-bottom: 0;
  }
}

效果说明 #

• 桌面端（≥768px）：
  第一行自动排列1、2、3三个col-md-4列；因为列3设置了足够的最小高度，它会向下延伸到第二行；同时列4通过order-md-1排在列3前面，占据第二行的col-md-8空间，列3的下半部分占据剩余的col-md-4空间，完美实现你要的布局。
• 移动端（<768px）：
  列3通过order-1排在列4前面，四个列自动变成col-12，按1→2→3→4的顺序垂直排列，列3保持高度。

这样既满足了布局需求，又完全不用JavaScript，不会触发你的重型组件重新初始化~

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