在移动设备上更改图像位置

Question

我希望在手机上，我的图片能够放在文字块的顶部。以下是当前的代码，但它无法实现。请注意保留HTML标签。

    <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链接。

- onegun

---

你能添加你的 CSS（除了 bootstrap.css）吗？ - Evochrome

https://jsfiddle.net/mdsvjvLx/1/ - onegun

Answer 1

您不能通过推拉类来实现全宽列的此结果（因为列的总和超过了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;
  }
}

- Pim

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>

希望它有所帮助！
祝好，
附言：尝试在全屏模式下使用片段，然后尝试调整浏览器窗口大小 ;)

- Evochrome