如何在Bootstrap上安排不同屏幕尺寸的列位置和顺序？

Question

我知道Bootstrap通过为他们的网格系统使用类sm，md，lg来支持响应式设计。我知道他们也可以通过使用推拉来交换进入下一行的列。 但我要问的是，是否有人更好地考虑在这种情况下安排专栏。 B列应该跨越两行 - 它将保留文本，而col A，B将包含图像。

在大屏幕上
COL A | COL B
COL C | COL B

在较小的屏幕上
COL A
COL B
COL C

Answer 1

如果你创建2个Col B，但是当屏幕很大时隐藏1，而当屏幕很小时隐藏1个。

    <div class="col-lg-6">
        <div>
            A
        </div>
        <div class="hidden-lg">
            <img width=100 height=100 />
        </div>
        <div>
            C
        </div>
    </div>
    <div class="col-lg-6 visible-lg">
        <img width=100 height=100 />
    </div>