Question

我想在手机上将图像切换到文本块的顶部。目前的代码如下，但它失败了。

    <div class="col-md-10 col-sm-12 col-xs-12 center-block">
        <div class="banner-text col-xs-12 col-xs-push-12">
            <h1>Access all your<br/>apps</h1>
            <a href="#" class="btn btn-warning btn-lg clear-fix">Get Started</a>
        </div>
        <img src="img/banner.png" class="banner-image col-xs-12 col-xs-pull-12" />

    </div>

以下是代码的JSFiddle。

Answer 1

您可以使用@media screen and (max-width ...px)，以及在CSS中使用伪表（display:table;）。然后，为了更改元素的顺序，请为顶部表元素指定display: table-header-group，为底部元素指定display: table-footer-group。

无论如何，看看自己;）

CSS＆amp; HTML：

#example {
  display: table; width: 100%;
  table-layout: fixed;
}
  #banner-text {
    line-height:180px;
    background-color: #ff0000;
    display: table-header-group;
  } /* Will be displayed at the top of the pseudo-table */
  #banner-image {
    line-height:180px;
    background-color: #00ff00;
    display: table-footer-group; 
  } /* Will be displayed at the bottom */
  
@media screen and (max-width: 700px){
  #banner-text {
    display: table-footer-group;
  } /* Will be displayed at the bottom */
  #banner-image {
    display: table-header-group; 
  } /* Will be displayed at the top */
}

<div id="example">
    <div id="banner-text"><h1>TEXTBANNER</h1></div>
    <div id="banner-image"><h1>IMAGEBANNER</h1></div>
</div>

希望它有所帮助！
欢呼声，

Ps。在全屏模式下尝试使用代码段，然后尝试调整浏览器窗口的大小;）

Answer 2

使用全宽度列的推/拉类无法实现此结果（因为cols的总和加起来超过12）。

要获得所需的结果，您可以使用CSS flexbox。

1）使用移动优先方法，您希望在最小设备顶部显示的列首先出现在HTML

中

2）使用媒体查询更改断点x处的列顺序（我选择了768px作为示例）：

示例代码：

<强> HTML：

<div class="container re-order">
      <div class="row">
          <div class="col-xs-12 first">
                <h1>On mobile devices this col comes first</h1>             
          </div>
          <div class="col-xs-12 second">
                <h1>On larger screens this gets pulled up</h1>            
          </div>              
      </div>
  </div>

<强> CSS：

@media (min-width: 768px) {
  .re-order .row {
    display: flex;
    display: -ms-flex;
    flex-direction: column;
  }
  .re-order .row .first {
    order: 2;
  }
  .re-order .row .second {
    order: 1;
  }
}

更改手机上的图像位置

2 个答案: