Xhakalaca Xhakalaca - 3 months ago 17
CSS Question

How to push the middle div on top in small screen in Bootstrap

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

I have written the following code:-

<div class="row" style="margin:100px">
<div class="col-sm-4 push-col-xs-6" style="border: 1px solid;min-height: 300px;">
The default Carousel
</div>
<div class="col-sm-4 pull-col-xs-12" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_mer">Official<br>Merchandise<br>Partner</h3>
</div>
<div class="col-sm-4 col-xs-6" style="border: 1px solid;min-height: 300px;">
<img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
<h3 style="position:absolute" class="home_blog">Company<br>Blog</h3>
</div>
</div>


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..

Can someone please help

Answer

Just use pull and push class for col-sm ..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin:100px">
<div class="col-xs-12 col-sm-4 col-sm-push-4" style="border: 1px solid;min-height: 300px;">
      <img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
      <h3 style="position:absolute" class="home_mer">Official<br>Merchandise<br>Partner</h3>
    </div>
    <div class="col-xs-6 col-sm-4 col-sm-pull-4" style="border: 1px solid;min-height: 300px;">
      <!-- <slick class="thumbList" settings="jumboSlickPanel" style="position: inherit !important;"> -->
           <!-- <img class="thumbnail" src="{{'https://files.abc.com/uploads/products/thumbs96_108/'+product.images.original[0].name}}"> -->
           <!-- <img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.aboads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;">
     </slick> -->
    </div>
    
    <div class="col-sm-4 col-xs-6" style="border: 1px solid;min-height: 300px;">
      <img src='https://files.abc.com/uploads/fanbook/thumbs/1450524216-9.jpg' class="img img-responsive" style="position:relative">
      <h3 style="position:absolute" class="home_blog">Company<br>Blog</h3>
    </div>
  </div>

Comments