html - Bootstrap 3 中的自定义嵌套列

Question

我有一个严格的要求，要用 Bootstrap 3 制作像这张图片这样的布局:

目前我可以这样做:

这是我的示例 html 布局:https://jsfiddle.net/isherwood/4etczrwx/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

    <div class="row">

        <div class="col-sm-6" style="height:500px;background-color:red;">
            images
        </div>

        <div class="clearfix col-sm-6"  style="height:100px;background-color:yellow;">
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
        </div>

        <div class="col-sm-3" style="height:200px;background-color:blue;">
            keyfeature
            <ul>
                <li>testest 1</li>
                <li>testest 2</li>
                <li>testest 3</li>
                <li>testest 4</li>
            </ul>
        </div>

        <div class="col-sm-3" style="height:600px;background-color:gray;">
            Price tab here
        </div>

        <div class="col-sm-9" style="height:800px;background-color:green;">
            Configurator here
        </div>
    </div>
</div>

我想我缺少制作绿柱的东西？
还是我应该使用推/拉来使其按我的预期工作？

Answer 1

当屏幕宽度变为 786px 或更大时，将 float: right; 属性应用于灰色 block 。为此，我定义了一个新的特殊类 .pull-sm-right。

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

    <div class="row">

        <div class="col-sm-6" style="height:500px;background-color:red;">
            images
        </div>

        <div class="clearfix col-sm-6"  style="height:100px;background-color:yellow;">
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
            text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg
        </div>

        <div class="col-sm-3" style="height:200px;background-color:blue;">
            keyfeature
            <ul>
                <li>testest 1</li>
                <li>testest 2</li>
                <li>testest 3</li>
                <li>testest 4</li>
            </ul>
        </div>

        <div class="col-sm-3 pull-sm-right" style="height:600px;background-color:gray;">
            Price tab here
        </div>

        <div class="col-sm-9" style="height:800px;background-color:green;">
            Configurator here
        </div>
    </div>
</div>