title: bootstrap box spaning rows right side img element
body: <p>there's some problems with responsive grid system to me.</p>
  
  <p><a href="http://imageshack.com/a/img537/9687/4H48G0.jpg" rel="nofollow">http://imageshack.com/a/img537/9687/4H48G0.jpg</a></p>
  
  <p><a href="http://imageshack.com/a/img539/8265/ANvr0Y.jpg" rel="nofollow">http://imageshack.com/a/img539/8265/ANvr0Y.jpg</a> - problem is here</p>
  
  <p><strong>My source code:</strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt; 
          .wrapper {
  
            height: 100%;
  
          text-align: center;
  
            margin: 0 auto;
          }
          img { max-width:100% !important;
              height:auto;
              display:block;
            }
          .text { 
              color: #fff;
              text-shadow:0px 2px 10px #000;
              height: 100%;
              left: 0;
              position: absolute;
              text-align: center;
              top: 0;
              font-size: 22px;
              width: 100%;}
          .box {
              border: 1px dashed #000;
              overflow: hidden;
              position: relative;
          }
  
          .tb_floater {
              font-size: 1.5em;
              margin-top: 20%;
              padding-top: 10%;
  
          }
          .box.tall {
              height: 300px;
          }
          .box.tall &gt; a &gt; img {
              height: auto;
          }
          &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4 box tall"&gt;
          &lt;a href="#"&gt;
              &lt;img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg"&gt;
              &lt;/a&gt;
          &lt;div class="text tall"&gt;
            &lt;div class="tb_floater"&gt;
              &lt;p&gt;Loren ipsum shit amet&lt;br/&gt;Loren ipsum&lt;/p&gt;
            &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
        &lt;div class="col-xs-6 col-md-6 box" style="height:150px;"&gt;.col-xs-6 .col-md-6&lt;/div&gt;
      &lt;div class="col-xs-6 col-md-2 box" style="height:150px;"&gt;.col-xs-6 .col-md-2&lt;/div&gt;
      &lt;div class="col-xs-6 col-md-2 box" style="height:150px;"&gt;.col-xs-6 .col-md-2&lt;/div&gt;
        &lt;div class="col-xs-6 col-md-6 box" style="height:150px;"&gt;.col-xs-6 .col-md-6&lt;/div&gt;
  
  &lt;/div&gt;
    &lt;div class="row"&gt;
  &lt;div class="pull-right col-xs-6 col-md-4 box tall"&gt;
        &lt;a href="#"&gt;
            &lt;img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg"&gt;
            &lt;/a&gt;
          &lt;div class="text tall"&gt;
            &lt;div class="tb_floater"&gt;
              &lt;p&gt;Loren ipsum shit amet&lt;br/&gt;Loren ipsum&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  
         &lt;div class="col-xs-6 col-md-2 box" style="height:150px;"&gt;.col-xs-6 .col-md-6&lt;/div&gt;
        &lt;div class="col-xs-6 col-md-6 box" style="height:150px;"&gt;.col-xs-6 .col-md-2&lt;/div&gt; 
        &lt;div class="col-xs-6 col-md-2 box" style="height:150px;"&gt;.col-xs-6 .col-md-6&lt;/div&gt;
        &lt;div class="col-xs-6 col-md-6 box" style="height:150px;"&gt;.col-xs-6 .col-md-2&lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>That empty field is problem when i resize the browser, any solution ?</p>