Responsive Bootstrap 3

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<label id="dimension"></label>
<div class="container">

  <div class="row" style="padding:0; margin:0;">
    <div class="col-xs-12" style="position:relative;">
        <h1 class="text-warning" style="position:absolute;top:40%;left:25px;">Ciao Ciao</h1>
        <h2 class="text-warning" style="position:absolute;bottom:0px;left:25px;">prova pippo</h2>
        <img  class="main-img img-responsive" src="http://lorempixel.com/g/1200/300/">
    </div>
  </div>


  <div class="row">
    <div class="col-xs-12">
      <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">
        <img class="img-responsive" src="http://lorempixel.com/nature/800/400/">
      </div>
      <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
      <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="a col-xs-12 col-sm-12 col-md-6 col-md-push-6 col-lg-6">
        <img class="img-responsive" src="http://lorempixel.com/sport/800/400/">
      </div>
      <div class="b col-xs-12 col-sm-12 col-md-6 col-md-pull-6 col-lg-6">Content of B</div>
      <div class="c col-xs-12 col-sm-12 col-md-6 col-md-pull-6 col-lg-6">Content of C</div>
    </div>
  </div>

</div>

CSS

#dimension {
  background-color: yellow;
}

div[class*='col-'] {
  -background-color: silver;
  -border: 1px solid black;
}
.main-img{
  width:100%;
}
.row {
  padding:10px 0 ;
}

JavaScript

var div = document.getElementById('dimension');

function showWidth() {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  div.innerHTML = 'viewport width: ' + w + 'px';
};
window.onresize = showWidth;
showWidth();