如何在右侧列出列的列表

Question

我遇到一个问题，即有时.col-sm-8没有足够的元素且.col-sm-4落在左边。 col-sm-4列与侧边栏类似，内容col-sm-8同时可能为空。 如何在图片中定位它们仍然能够在调整大小时使用bootstrap column magic？

不幸的是我不能使用row作为divs顺序：

<div class='col-sm-4'>
<div class='col-sm-8'>
<div class='col-sm-4'>
<div class='col-sm-4'>

因为在移动设备上我需要用这种方式对它们重新排序。

Answer 1

运行代码段整页以查看8到4的布局。

.border {
    border: .125em solid;
    height: 200px;
}

.invisible {
    visibility: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="col-xs-12 col-sm-4 pull-right border">SM 4</div>
            <div class='col-xs-12 col-sm-8 border'>SM 8</div>
        </div>
        <div class="col-xs-12">
            <div class="col-sm-8 invisible"></div>
            <div class="col-xs-12 col-sm-4 border">SM 4</div>
        </div>
        <div class="col-xs-12">
            <div class="col-sm-8 invisible"></div>
            <div class="col-xs-12 col-sm-4 border">SM 4</div>
        </div>
    </div>
</div>

Answer 2

解决方案比我想象的容易：

.col-sm-8 { min-height: 100vh; }

它解决了col-sm-4在col-sm-8为空时findById()总是落在哪里的错误。