Question

我有以下HTML结构：

<div class="clearfix">
    <div class="col-xs-12 col-md-7>
        <div>
            div A
        </div>
        <div>
            div B
        </div>
    </div>
    <div class="col-xs-12 col-md-5>
        <div>
            div C
        </div>
        <div>
            div D
        </div>
    </div>
</div>
<div>
    div E
</div>

显然，结果如下：

div A        div C
div B        div D
div E

现在，我想要的是在移动：

中获得以下结果

div A
div C
div B
div D
div E

如何使用媒体查询实现这一目标？那可能吗？我已经实现了desktop-first approach，但是如果从mobile-first approach开始并且实现上面的桌面结构更容易，那就没问题了。

Answer 1

您无法在较小的屏幕中更改列的顺序，但您可以在大屏幕中执行此操作。

因此，请更改列的顺序。

因此，首先显示移动主内容。

通过使用col-lg-push和col-lg-pull，我们可以对大屏幕中的列进行重新排序

Example

Answer 2

只需按照以下方式重新构建HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-7">
      div A
    </div>
    <div class="col-xs-12 col-md-5">
      div C
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-7">
      div B
    </div>
    <div class="col-xs-12 col-md-5">
      div D
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-7">
      div E
    </div>
  </div>
</div>

Answer 3

如果您正在使用引导程序，现有的类（如col-sm-12或col-md-2等）应该使用bootstrap的默认屏幕参数自动执行，我认为使用div和媒体查询会变得更加困难< / p>

从移动设备转到桌面设备时更改div顺序

3 个答案: