title: How to make one div over two div's only for mobile devices
body: <p>I'm trying to make a simple page only for mobile devices.<br>
  There is header text, then goes text at the top, text at the bottom and image of the phone, that hovers both text (at the top and at the bottom).<br>
  I've tried to achive this with Twitter Bootstrap, but my result wasn't good enough, maybe because I'm don't understand overflow in CSS at all.<br>
  So this is what I'm trying to achieve:<a href="http://i.imgur.com/ds2CC2m.png" rel="nofollow">http://i.imgur.com/ds2CC2m.png</a><br>
  And here you can see what happening:<a href="http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview" rel="nofollow">http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview</a><br>
  Or you can check a lot of ugly code right here:  </p>
  
  <pre><code>    &lt;style type="text/css"&gt;
          .text p {
              padding-left: 15px;
          }
      &lt;/style&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="position: relative;"&gt;
          &lt;div class="row" style="background-color:#E4F6FC;"&gt;
              &lt;div class="col-md-3" style="margin:10px"&gt;
                  &lt;p&gt;Logo&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row " style="background-color:#E4F6FC;"&gt;
              &lt;div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%"&gt;
                  &lt;p&gt;My&lt;/p&gt;
                  &lt;p&gt;default&lt;/p&gt;
                  &lt;p&gt;text&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;"&gt;
                  &lt;img src="http://i.imgur.com/qYV93nS.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%"&gt;
                  &lt;p&gt;and few&lt;/p&gt;
                  &lt;p&gt;lines of great&lt;/p&gt;
                  &lt;p&gt;lorem ipsum&lt;/p&gt;
                  &lt;p&gt;here&lt;/p&gt;
                  &lt;button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn"&gt;
                      AWESOME BUTTON
                      &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I'm so apologize about mess, that you've seen and damage that was caused to your eyes :с</p>