如何在Bootstrap的小屏幕中将中间div推到顶部

Question

我正在尝试实现一个页面，其中在更大的屏幕中我有三个 div，而在较小的屏幕中希望中间 div 位于顶部并占据整个列宽，即 col-xs-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 使用 pull 和 push 类 ..

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