如何将右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