Bootstrap responsive column layout stacking columns

问题

I'm building a grid structure and I have changed the bootstrap container classes to new dimension which is working fine. I am currently trying to achieve the layout below and have gotten this far. Each column has a background image. I am trying to put another col-md-3 in the black section but have had no luck. Any suggestions?

My 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;
}

回答1:

And something like this?

<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>

来源：https://stackoverflow.com/questions/36068127/bootstrap-responsive-column-layout-stacking-columns