如何在超小屏幕上使用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>

在超小型屏幕中，主要内容优先于旁白部分。但是怎样才能让它先显示，然后再显示，保留初始的html标记，并且只显示在超小屏幕上呢？在超小型设备上，所有列都必须占用所有屏幕宽度

Answer 1

为两个div添加了自定义类up-xs和down-xs，并使用media-query设置了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;
 }
}