Wie man das mittlere div an der Spitze in kleinen Bildschirm in Bootstrap

Question

schiebe Ich versuche, eine Seite zu implementieren, wo auf einem größeren Bildschirm habe ich drei divs und auf dem kleineren Bildschirm wollen die mittlere div oben tun und die volle nehmen Spaltenbreite dh col-xs-12

ich habe den folgenden Code geschrieben: -

<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 wie oben erwähnt, ich die offizielle Waren Partner auf für mobile Ansicht und die beiden anderen darunter nehmen wollen in col-xs-6 ..

Kann jemand bitte helfen

Answer 1

Verwenden Sie einfach Pull- und Push-Klasse für 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>