html - Bootstrap 3 : How to get a lower column (default xs/mobile layout) to sit higher in larger viewports

Question

我的问题是我的非移动布局。我有四列。这是它们的顺序(宽度适用于 sm/md/lg):

A(3-wide)
B(9-wide)
C(9-wide)
D(3-wide)

B 列是一个很大的可变高度列。所以 A 列总是比 B 短。当视口(viewport)扩大时，我的问题是我无法让 D 位于 A 下方，即使它们都是 3 宽的列并且下方有空白/未填充的空间A.

我想要的:

BBB A
BBB D
BBB
CCC

我现在拥有的:

BBB A
BBB
BBB
CCC D

无论我用推/拉、嵌套等方式尝试什么，D 都不会跳到 A 下面的那个空间。

这是我的代码，精简到最基本的部分:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 pull-right">
            <p>(A) Right-aligned, 3-wide div that's pretty short</p>
        </div>
        <div class="col-xs-12 col-sm-9 pull-left">
            <h1>(B) Left-aligned, large variable height content div.</h1>
            <h1>(B)</h1>
            <h1>(B)</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-9">
            <h3>(C) Left-aligned smaller content div</h3>
            <h3>(C)</h3>
            <h3>(C)</h3>
        </div>
        <div class="col-xs-12 col-sm-3">
            <h4>(D) Right-aligned, 3-wide div that I want to go below the first 3-wide div</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
            <h4>(D)</h4>
        </div>
    </div>
</div>

我也在纸上画了它，如果这有助于可视化所需的布局:

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

如果你正好需要 4 列，你可以使用这个解决方案:

1. 将 B 和 C block 包装到一个附加 block 中。
2. 当屏幕宽度变为 786 像素或更大时，将 float: right 属性应用于 block A。为此，我定义了一个新的特殊类。

请检查结果:https://jsfiddle.net/glebkema/ckLqrfmp/

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

/* Decorations */
#A, #B, #C, #D { 
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
#A { background: #c69; min-height:  50px; }
#B { background: #9c6; min-height: 150px; }
#C { background: #69c; min-height: 100px; }
#D { background: #ff0; min-height: 250px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div id="A" class="col-sm-3 pull-sm-right">A</div>
    <div class="col-sm-9">
      <div class="row">
        <div id="B" class="col-xs-12">B</div>
        <div id="C" class="col-xs-12">C</div>
      </div>
    </div>
    <div id="D" class="col-sm-3">D</div>
  </div>
</div>