Question

我有两个基本的div，我在Bootstrap布局中并排显示。首先使用移动设备，我首先有一个搜索面板div显示，然后是另一个div。在桌面模式下，使用推/拉我正确地让第一个div向右移动。

在中间视图，平板电脑视图中，div是堆叠的，但我想交换他们的订单。我创建了一个Bootply：http://www.bootply.com/I8IUuYNTWK#

总结：

Mobile:
   [search]
   [slideshow]

Tablet:
   [slideshow]
   [search]

Desktop:
   [slideshow] [search]


<div class="container">
    <div class="row">
        <div id="search_div" class="col-md-3 col-md-push-9">
            search form here (this should be on the right on desktop, on top for mobile, and second for tablet)
        </div>
        <div id="slideshow_div" class="col-md-9 col-md-pull-3">
            slide show here  (this should be on the left for desktop, second for mobile and on top for tablet)
        </div>
    </div>
</div>

我已经看过几十种尝试这种方法，但到目前为止看起来都很奇怪，不是很干净。我也不愿意复制div并隐藏节目。

Answer 1

您可以使用弹性重新排序在平板电脑屏幕尺寸中对它们进行重新排序。检查Flexbox

的兼容性表

将arr.tolist()包含在目标中平板电脑屏幕尺寸宽度。
使用带行的自定义类，以避免影响所有行。
确保@media (min-width: 768px) and (max-width: 992px)设置为flex-direction以获得堆叠效果。

column

#search_div {
  background: yellow;
  padding: 30px;
}
#slideshow_div {
  background: red;
  padding: 40px;
}
@media (min-width: 768px) and (max-width: 992px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  #search_div {
    order: 2;
  }
  #slideshow_div {
    order: 1;
  }
}

Answer 2

Flexbox允许您设置元素的顺序。使用媒体查询和一些弹性箱规则可以轻松完成。你可以在这个没有引导网格的情况下使用flexbox。如果你想看到它的运作（http://www.bootply.com/O3HNHn1ULt）

，我会分叉你的bootply

@media (min-width: 800px) {
   .row { 
        display: flex; 
        flex-direction: column;
    }
    .row > #search_div { 
        order: 2;
    }
    .row > #slideshow_div {
        order: 1; 
    }
}

@media (min-width: 1000px) {
    .row {
        display: flex;
        flex-direction: row;
    }
    .row > #search_div { 
        order: 2;
        width: 25%;
    }
    .row > #slideshow_div { 
        order: 1; 
    }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/order

仅在平板电脑视图中交换div（行）

2 个答案: