Question

我有一行包含2个元素，我试图让第二个元素在折叠到移动设备时显示在上面。

我可以通过推拉轻松完成，但问题是我无法控制html的呈现方式。我的HTML的顺序如下：

＆＃13;

<div class="row">
    <div class="col-sm-8" style="background-color: green">
        here is some text
    </div>
    <div class="col-sm-4" style="background-color: red">
        an image
    </div>
</div>

＆＃13;

我正试图实现这个目标：

＆＃13;

<div class="row">
    <div class="col-sm-4 col-sm-push-8" style="background-color: red">
        an image
    </div>
    <div class="col-sm-8 col-sm-pull-4" style="background-color: green">
        here is some text
    </div>
</div>

＆＃13;

是否可以使用bootstrap类或任何CSS样式进行？我只希望它适用于移动设备。

我非常感谢任何帮助或指导！

Answer 1

你可以借助flex的CSS属性来做到这一点。您可以在移动设备中订购子元素。您可以从here了解Flexbox。工作示例位于此fiddle

中

@media (max-width: 768px) {
  .row{
    display: flex;
    flex-direction: column;
  }

  .inner-rows{
    width: 100%;
    max-width: 100%;
  }

  .red {
     order: -1; 
  }
}

<div class="row">
    <div class="col-sm-8 inner-rows green" style="background-color: green">
        here is some text
    </div>
    <div class="col-sm-4 inner-rows red" style="background-color: red">
        an image
    </div>
</div>

bootstrap移动折叠顺序（从右到左）没有推拉

1 个答案: