css - Bootstrap 3 复杂布局

Question

还没有发现任何像这样的复杂布局问题，所以这里开始。

问题 1 - 我需要我的布局如下:

+----------------------------------------+    +--------------------+
|                                        |    |                    |
|                                        |    |          2         |
|                                        |    +--------------------+
|                                        |    
|                                        |    +--------------------+
|                                        |    |                    |
|                                        |    |                    |
|                   1                    |    |                    |
|                                        |    |          3         |
|                                        |    |                    |
|                                        |    |                    |
|                                        |    +--------------------+
|                                        |    
|                                        |    +--------------------+
|                                        |    |                    |
|                                        |    |                    |
|                                        |    |          4         |
+----------------------------------------+    |                    |
                                              |                    |
+----------------------------------------+    |                    |
|                   |                    |    +--------------------+
|         5         |        6           |
|                   |                    |    +--------------------+
+----------------------------------------+    |                    |
                                              |          7         |
                                              +--------------------+

当在较小的屏幕上查看时， block 3 和 4、5 和 6 分布在 2 列上，没有堆叠， block 5 和 6 在最底部，如下所示:

+----------------------------------------+    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                   1                    |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
+----------------------------------------+    
+----------------------------------------+    
|                                        |    
|                   2                    |
|                                        |    
+----------------------------------------+                        
+----------------------------------------+    
|                   |                    |    
|                   |                    |
|                   |                    |
|         3         |         4          |
|                   |                    |
|                   |                    |
+----------------------------------------+
+----------------------------------------+    
|                                        |    
|                   7                    |
|                                        |    
+----------------------------------------+
+----------------------------------------+    
|                   |                    |    
|         5         |         6          |
|                   |                    |    
+----------------------------------------+

问题 2:我需要在 block 3 和 block 4 的顶部写一些长文本，所以我尝试将图像应用于 DIV 的背景。因此他们失去了响应能力(在 div 中硬编码或隐藏图像)。任何优雅的方式来实现这一点？

这是一个 JSFiddle , 以及相关的 HTML 代码:

<div class="container">
    <div class="row">
        <div id="mainleft" class="col-lg-6 col-md-6 col-sm-6">
            <img class="img-responsive" src="http://placehold.it/662x673?text=1">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6" style="background-color:#fff;">
                    <img class="img-responsive" src="http://placehold.it/474x94?text=5">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/474x94?text=6">
                </div>
            </div>
        </div>

        <div id="mainright" class="col-lg-6 col-md-6 col-sm-6">
            <div id="right1"><img src="http://placehold.it/334x57?text=2" style="visibility: hidden;" /></div>
            <div id="right2"><div class="txtoverimg2"><img src="http://placehold.it/334x347?text=3" style="visibility: hidden;" /><span class="txtover2 img-responsive">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
            <div id="right3"><div class="txtoverimg2"><img src="http://placehold.it/334x344?text=4" style="visibility: hidden;" /><span class="txtover2">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
            <img class="img-responsive" src="http://placehold.it/334x97?text=7" style="margin-top: 2px;/*border: 1px solid red;*/">
        </div>
    </div>
</div>

Answer 1

布局

1. 将 block 2、3、4 和 7 包装到一个附加 block 中。
2. 当屏幕宽度变为 786px 或更大时，将 float: right 属性应用于此 block 。为此，我定义了一个新的特殊类 .pull-sm-right。

请检查布局:https://jsfiddle.net/glebkema/eavcan0c/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

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

/* Decorations */
.col-sm-8:first-child              { background: #9c6; min-height: 300px; }
.col-xs-12                         { background: #ff0; min-height:  70px; }
.col-xs-6:nth-of-type(1)           { background: #f93; min-height: 100px; }
.col-xs-6:nth-of-type(2)           { background: #69c; min-height: 100px; }
.col-xs-6.col-sm-12:nth-of-type(2) { background: #69c; min-height: 150px; }
.col-xs-6.col-sm-12:nth-of-type(3) { background: #f93; min-height: 150px; }
.col-sm-8:first-child,
.col-xs-12,
.col-xs-6 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}

<div class="container">
  <div class="row">
    <div class="col-sm-8">1</div>
    <div class="col-sm-4 pull-sm-right">
      <div class="row">
        <div class="col-xs-12">2</div>
        <div class="col-xs-6 col-sm-12">3</div>
        <div class="col-xs-6 col-sm-12">4</div>
        <div class="col-xs-12">7</div>
      </div>
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-xs-6">5</div>
        <div class="col-xs-6">6</div>
      </div>
    </div>
  </div>
</div>