html - 如何在超小屏幕上使用 bootstrap 3 重置列的顺序并保留显示的 html 标记？

Question

这是html代码是什么:

<div class="col-sm-9 col-sm-push-3">Content</div>
<aside class="col-sm-3 col-sm-pull-9">Some aside text</aside>

在超小屏幕上，主要内容先出现在旁白部分之前。但是如何让它先行，然后 aside 元素再保留初始 html 标记，并且只在超小屏幕上运行？并且所有列必须在超小型设备上占据所有屏幕宽度

Answer 1

为两个 div 添加了自定义类 up-xs 和 down-xs 并使用媒体查询设置 xs 宽度条件。

HTML

<div class="row">
 <div class="col-md-9 down-xs">Content</div>
 <aside class="col-md-3 up-xs">Some aside text</aside>
</div>

CSS

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

 .up-xs {
  order: 1;
 }

 .down-xs {
  order: 2;
 }
}

Bootply