css - 试图让 Bootstrap 列以我想要的方式折叠

Question

我正在努力获得我想要的 Bootstrap 布局。这是我希望实现的目标。

在大屏幕上应该是什么样子(我知道怎么做):

-------------------------------------------------------
|   Column 1  |  Column 2   |  Column 3  |  Column 4  |
-------------------------------------------------------

它在中等屏幕上应该是什么样子(这是我卡住的地方):

-----------------------------------------
|   Column 1  |  Column 3  |  Column 4  |
|   Column 2  |            |            |
-----------------------------------------

在小屏幕上应该是什么样子(我知道怎么做):

---------------
|   Column 1  |
---------------
|   Column 2  |
---------------
|   Column 3  |
---------------
|   Column 4  |
---------------

有什么建议吗？？？？

Answer 1

解决方法如下:

<div class="row">
    <div class="col-md-4 col-sm-12 col-lg-6">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-6">Column 1</div>
            <div class="col-md-12 col-sm-12 col-lg-6">Column 2</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12 col-lg-3">Column 3</div>
    <div class="col-md-4 col-sm-12 col-lg-3">Column 4</div>
</div>