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
Post a Comment