Bootstrap Rows 的行为类似于 Pull-Left 类答案

【问题标题】：Bootstrap Rows to act like Pull-Left classBootstrap Rows 的行为类似于 Pull-Left 类
【发布时间】：2014-01-22 02:34:39
【问题描述】：

大家好，我有两个 Bootstrap 行，看起来像

<div class="wrapper">
  <div class="row" id="row1">
    <div class="col-md-6" id="col1">...</div>
    <div class="col-md-6" id="col2">...</div></div>
  <div class="row" id="row2">
    <div class="col-md-6" id="col3">...</div>
    <div class="col-md-6" id="col4">...</div>
  </div>
</div>

这种安排的输出是

我想要的输出是

知道怎么做吗？

【问题讨论】：

查看stackoverflow.com/questions/21241862/…

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

还有这样的 CSS 网格解决方案..

http://bootply.com/107567

否则砖石或同位素插件是要走的路..

引导程序 + 同位素：http://bootply.com/99910

【讨论】：

【解决方案2】：

看看mansonry.js 或isotope.js。
我不确定，但我认为仅使用引导程序这是不可能的。
如果我错了，请纠正我。

【讨论】：

【解决方案3】：

试试这个 -

<div class="wrapper">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
        </div>
    </div>
</div>

【讨论】：

感谢您的回答，但它破坏了移动媒体屏幕的顺序。如果屏幕调整大小或变小，我想保持顺序。
手机上的订单应该是什么？大概有些盒子需要折叠在其他盒子下面？
桌面上的顺序是 [row1[col1][col2]] 然后 [row2[col3] [col4]]。在平板电脑或手机上 [col1] 然后 [col2] 然后 [col3] 然后 [col4]
啊，我明白了。我不确定你是否能达到你想要的效果并且仍然保持顺序不变。