在小屏幕上只有一个引导列在其他三个下方弹出

Question

以下是桌面上我的页脚的屏幕截图...

当我缩小屏幕时，我得到了这个凌乱的布局......

哎呀，我最好让最右边的列像其他三个一样弹出：

我已经尝试了许多无用的东西...这是我目前的网格布局......我可以弄清楚如何专门获得正确的col来弹出下面。

<div class="row">
    <div class="col-md-4">
        foo
    </div>
    <div class="col-md-2">
        bar
    </div>
    <div class="col-md-2">
        baz
    </div>
    <div class="col-md-4">
        qux
    </div>
</div>

Answer 1

export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }
    createCan() {
        let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
        let rect = paper.rect(0, 0, 10, 10);
    }
}

Answer 2

使用所有这些... col-xs，col-sm，col-md＆amp; COL-LG ... 它的xtra小，小，中，大视图

然后计算..每行在bootstraps网格系统中有12列。

像： 4 - 4 - 4或， 4 - 2 - 2 - 4或， 8 - 2 - 2或任何你想要的;）

例如：如果你想使用col-lg-6的两个div你将在bigview中的一行中有2列。如果你将它们都设置为12 in sm，你将把它们作为两列中的一列在小视图中。