html - 在 Bootstrap 3 中切换两个字段

Question

这是我的移动结构:

A
B
C

我需要在桌面上更改为另一个:

C
A B

我尝试过拉动和插入，但无法使其工作。

我的基本代码实际上是这样的:

<div class="col-md-? col-xs-12 col-md-push-?">
  <div class="col-md-6 col-xs-12">
    A
  </div>

  <div class="col-md-6 col-xs-12">
    B
  </div>
</div>

<div class="col-md-? col-xs-12 col-md-pull-?">
  C
</div>

正确的方法是什么？

Answer 1

这可以通过 css、使用 Flexbox 和媒体查询来完成，如下所示:

.wrapper{
  display:flex;
  flex-flow:row wrap;
}
.wrapper > *{
  flex: 1 100%;
}
@media only screen  and (min-width : 1224px) {
  .ab{
      order:2;
      flex: 1 auto;
    }
  .c{
      order:1;
    }
}

<div class="wrapper">
   <div class="ab">A</div> 
   <div class="ab">B</div> 
   <div class="c">C</div> 
</div>