css - 如果可用，如何 float Bootstrap 列

Question

我有一排有四个容器，每个容器都是 col-md-6。有没有办法定位第三个容器，使其占据其上方的垂直空间？我可以制作两列，但容器 2 和容器 3 的内容可能会变大，所以我希望容器根据最有效的布局重新排列。

Bootstrap Columns

```

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="feature-content4 item-content">
            ...
            </div>
        </div>
        <div class="col-md-6">
            <div class="feature-content4 item-content">
            ...
            </div>
        </div>
        <div class="col-md-6">
            <div class="feature-content4 item-content">
            ...
            </div>
        </div>
        <div class="col-md-6">
            <div class="feature-content4 item-content">
            ...
            </div>
        </div>
    </div>
 </div>

Answer 1

这是一个非常有趣的问题。可惜你没有写代码的例子。也许您应该考虑在两个单独的列中重新排列容器(如下面的代码)，但我希望有人能比我更好地回答这个问题。

<div class="container">
    <div class="row">
       <div class="col-md-12 col-sm-12">

            <div class="col-md-6">
                <div class="col-md-12 col-sm-12">
                  <div class="feature-content1 item-content">
                 ...
                  </div>
                </div>
                <div class="col-md-12 col-sm-12">
                  <div class="feature-content2 item-content">
                 ...  
                  </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-md-12 col-sm-12">
                  <div class="feature-content3 item-content">
                  ... 
                  </div>
                </div>
                <div class="col-md-12 col-sm-12">
                  <div class="feature-content4 item-content">
                 ...
                  </div>
                </div>
            </div>
        </div>
    </div>
 </div>