Q:

Bootstrap 3 complex layout

Haven't found any complex layout question like this one, so here goes.
Question 1 - I need my layout to be like:
+----------------------------------------+    +--------------------+
|                                        |    |                    |
|                                        |    |          2         |
|                                        |    +--------------------+
|                                        |    
|                                        |    +--------------------+
|                                        |    |                    |
|                                        |    |                    |
|                   1                    |    |                    |
|                                        |    |          3         |
|                                        |    |                    |
|                                        |    |                    |
|                                        |    +--------------------+
|                                        |    
|                                        |    +--------------------+
|                                        |    |                    |
|                                        |    |                    |
|                                        |    |          4         |
+----------------------------------------+    |                    |
                                              |                    |
+----------------------------------------+    |                    |
|                   |                    |    +--------------------+
|         5         |        6           |
|                   |                    |    +--------------------+
+----------------------------------------+    |                    |
                                              |          7         |
                                              +--------------------+

And when viewed on smaller screens have block 3 and 4, 5 and 6 spread on 2 columns, not stacked and block 5 and 6 at the very bottom like:
+----------------------------------------+    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                   1                    |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
|                                        |    
+----------------------------------------+    
+----------------------------------------+    
|                                        |    
|                   2                    |
|                                        |    
+----------------------------------------+                        
+----------------------------------------+    
|                   |                    |    
|                   |                    |
|                   |                    |
|         3         |         4          |
|                   |                    |
|                   |                    |
+----------------------------------------+
+----------------------------------------+    
|                                        |    
|                   7                    |
|                                        |    
+----------------------------------------+
+----------------------------------------+    
|                   |                    |    
|         5         |         6          |
|                   |                    |    
+----------------------------------------+

Question 2: I need some long text to be written on top of block 3 and 4, so I tried applying the images to the DIV's background. So they loose their responsivness (hardcoded with or didden image inside div).  Any elegant way of achieving this?  
Here's a JSFiddle, and the relevant HTML code:
<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>

A:

Layout

Wrap blocks 2, 3, 4 and 7 into an additional block.
Apply the float: right property to this block when the screen width becomes 786px or more. I've defined a new special class .pull-sm-right for this purpose.

Please check the layout: 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>

