在移动环境下改变图像位置

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

对于全宽度列，推/拉类不能达到这一结果(因为cols的加起来超过了12)。

为了达到您想要的结果，您可以使用CSS柔性箱。

1)使用移动第一方法，要在最小设备的顶部显示的列首先出现在HTML中

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

示例代码：

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

Answer 2

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

无论如何，看看你自己;)

CSS和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.在全屏模式下尝试代码片段，然后尝试调整浏览器窗口的大小;)