Как нажимать средний div сверху на маленьком экране в Bootstrap

Question

Я пытаюсь реализовать страницу, где на большом экране у меня есть три div присутствуют, а на маленьком экране хотят, чтобы средний div делал сверху и принимал все ширина колонки т.е. Col-хз-12

Я написал следующий код: -

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

так как уже упоминалось выше, я хочу взять официальный партнер товаров на верхней части для мобильного просмотра и два других ниже него в col-xs-6 ..

Может кто-нибудь, пожалуйста, помогите

Answer 1

Просто используйте Нажимная класс для 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>