Bootstrap 响应式列布局堆叠列

Question

我正在构建一个网格结构，并且我已将引导容器类更改为工作正常的新维度。我目前正在尝试实现下面的布局并且已经做到了这一点。每列都有一个背景图像。我正在尝试将另一个 col-md-3 放在黑色部分，但没有运气。有什么建议吗？

我的 HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row">
        </div>
        <div class="col-md-3 home-row-red">
        </div>
        <div class="col-md-6 col-sm-12 home-row-big">
        </div>
    </div>
</div>

CSS

.boats-row {
    max-height: 720px;
    height: 100%;
    height: 720px;
    background: url(img/boats.png);
    background-size: cover;
}

.home-row-red {
    height: 360px;
    background: red;
    max-height: 360px;
}

.home-row-big {
    height: 720px;
    max-height: 720px;
    background: url(img/panel-large.png);
    background-size: cover;
}

Answer 1

还有这样的事情吗？

<div class="row">

    <div class="col-sm-12 col-md-6">
        <div class="col-sx-6 col-sm-6 col-md-6  boats-row   ">

        </div>

        <div class="col-sx-6 col-sm-6 col-md-6 home-row-red">

        </div>

        <div class="col-sx-6 col-sm-6 col-md-6 home-row-blue">

        </div>
    </div>

    <div class="col-md-6 col-sm-12 home-row-big">

    </div>

</div>