title: How to push the middle div on top in small screen in Bootstrap
body: <p>I am trying to implement a page where in a bigger screen I have three divs present and in the smaller screen want the middle div to do on top and take the full column width ie col-xs-12</p>
  
  <p>I have written the following code:-</p>
  
  <pre><code> &lt;div class="row" style="margin:100px"&gt;
      &lt;div class="col-sm-4 push-col-xs-6" style="border: 1px solid;min-height: 300px;"&gt;
        The default Carousel
      &lt;/div&gt;
      &lt;div class="col-sm-4 pull-col-xs-12" style="border: 1px solid;min-height: 300px;"&gt;
        &lt;img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative"&gt;
        &lt;h3 style="position:absolute" class="home_mer"&gt;Official&lt;br&gt;Merchandise&lt;br&gt;Partner&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 col-xs-6" style="border: 1px solid;min-height: 300px;"&gt;
        &lt;img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative"&gt;
        &lt;h3 style="position:absolute" class="home_blog"&gt;Company&lt;br&gt;Blog&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So as Mentioned above I want to take the Official Merchandise Partner on top for mobile view and other two below it in col-xs-6..</p>
  
  <p>Can someone please help</p>