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的拉动和推送课程。

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

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

1 个答案: