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


i trying implement page in bigger screen have 3 divs present , in smaller screen want middle div on top , take full column width ie col-xs-12

i have written following code:-

 <div class="row" style="margin:100px">     <div class="col-sm-4 push-col-xs-6" style="border: 1px solid;min-height: 300px;">       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 mentioned above want take official merchandise partner on top mobile view , other 2 below in col-xs-6..

can please help

just use pull , push class 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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -