代码之家 › 专栏 › 技术社区 › Paco Zevallos

order div breakpoint mobile bootstrap 4[重复]

bootstrap-4

0

Paco Zevallos · 技术社区 · 7 年前

这个问题已经有了答案:

桌面版的顺序如下:

<div class="row">
  <div class="col-md-7">
    Content 1
  </div>
  <div class="col-md-5">
    Content 2
  </div>
</div>

如何使内容2首次出现在手机上?

2 回复 | 直到 7 年前

1

mahan 7 年前

使用 order-first and orader-md-0 classes 对于 content 2 列。

订单第一 排在第一列。同时 order-md-0 重置 order 当 md 已到达断点。

无法仅为mobile排序列,因为bootstrap已删除 *-xs-* 类。因此,您需要同时使用这两个类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 col-md-7">
    Content 1
  </div>
  <div class="col-12 order-first order-md-0 col-md-5">
    Content 2
  </div>
</div>

https://codepen.io/anon/pen/mKRVWN

你没有使用 col-* 用于小屏幕。所以我用过 col-12 .

2

0

n8udd 7 年前

如果不需要特别使用bootstrap,那么一个简单的flex布局将对其进行排序。

有一个特别的 order 选项:

https://codepen.io/n8udd/pen/eKgONQ