html - 如何将右 div 的第二个元素放在 Bootstrap 的底部？

Question

我使用 bootstrap 来设计我的网站。我尝试像下面的布局那样做。我该怎么做？

尺寸大时;

-------------------------
|    A(md-8)   |  B(4)  |
|              |--------|
|              |  C(4)  |
|              |--------|
|              |
----------------

当尺寸较小时；

----------------
|     B        |
----------------
|     A        |
----------------
|     C        |
----------------

Answer 1

在 HTML 中，将 div 按 B、A、C 的顺序放置，并为 B 和 C 提供一个类 pull-right-lg 以使其向右浮动。仅针对使用媒体查询的大型设备定位此类。

HTML

<div class="container">
    <div class="row">
        <div class="col-md-4 pull-right-lg">B</div>
        <div class="col-md-8">A</div>
        <div class="col-md-4 pull-right-lg">C</div>
    </div>
</div>

CSS

@media (min-width: 992px) {
    .pull-right-lg {
        float: right;
    }
}

See Fiddle