css - 如何在右侧放置列列表

Question

我有一个问题，有时 .col-sm-8 没有足够的元素和 .col-sm-4 落在左边。 col-sm-4 列就像侧边栏，内容 col-sm-8 同时可能是空的。如何像图片中那样定位它们并且仍然能够在调整大小时使用 Bootstrap 列魔术？

不幸的是，我不能使用 row，因为 div 的顺序是:

<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>