如何向上移动堆叠的列（使用 bootstrap 但任何 css 都可以）

Question

当 [2] 高于 [1] 时，希望将第 [3] 列向上移动

[1][2]

[3][4]

这是布局的引导文件：http://www.bootply.com/KbAf8UOk9c

第 [1] 列和 [3] 列之间有空白 space，我希望将第 [3] 列上移。

（仅供参考，第 [4] 列的样式已设置为在第 [2] 列下向上移动）

谢谢

更新：在移动视图中，列需要堆叠（与 booply 相同）：

[1]

[2]

[3]

[4]

更新 2 我仍在努力解决这个问题，目前还没有找到解决方案。

Answer 1

基本上，您可以使用嵌套 row 类:

来实现

<div class="container" style="border:1px solid black;">
  <div class="row">
    <div class="col-xs-8" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[1] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in, vel te munere ubique temporibus. Ius essent integre ne, te mel autem quaeque, ad omnes voluptua salutandi mel. Vitae perpetua abhorreant cum et, est definitiones vituperatoribus ea. Sed no admodum temporibus reformidans, id nam dolorem vivendo accusamus, et vel solum postulant.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[3] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in</p>
        </div>
      </div>
    </div>
    <div class="col-xs-4" style="border:1px solid black;">
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[2] Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in Lorem ipsum dolor sit amet, et eum altera nostrum, in nam ludus dictas. Has et velit ignota, sed eripuit pericula in</p>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12" style="border:1px solid black;">
          <p>[4] This column needs to shift up depending on the content onthe top-left section</p>
        </div>
      </div>
    </div>
  </div>
</div>

初始row包含两列col-xs-8和col-xs-4，每列包含多个row和col-xs-12类。然后，根据内容，他们将根据上面的内容调整大小并移动up/down。由于您对列进行了编号，因此奇数列在右侧 col-xs-8，偶数列在左侧 col-xs-4。

查看此 Bootply 示例。

此外，我为我的专栏使用了 col-xs-*，因为它们是最小的并且适用于所有视图，但您可以将其更改为 col-sm、col-md 或col-lg 类以满足您的需求。

Answer 2

不幸的是，没有提交有效的解决方案（我希望只有 css 的解决方案）。我最终使用 jQuery 砌体找到了 解决方案 ：http://masonry.desandro.com/

如果您愿意，可以编写自己的自定义 JavaScript 来处理您的特定需求（如果完整的砌体逻辑太过分了）...但似乎需要 JavaScript 逻辑来补偿对于 "gap(s)"...这是原始 bootply 示例的 工作示例 ：http://www.codeply.com/go/mEdTy6E6mp 提示：对于砌体逻辑，您可以将 columnWidth 值设置为最小的列 width/class - 对我来说是 .col-md-4 - 当列宽为不完全一样。

如何向上移动堆叠的列（使用 bootstrap 但任何 css 都可以）

How to move stacked columns up (using bootstrap but any css will do)

html

css

twitter-bootstrap-3