如何使用推拉在小屏幕尺寸下更改 3 bootstrap 列的顺序？

Question

我有 3 列使用 bootstrap

<div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-5">2</div>
   <div class="col-md-4">3</div>
</div>

中号大号看起来像这样：

我希望它们在小尺寸和超小尺寸时看起来像这样：

我尝试使用拉和推

<div class="row">
    <div class="col-md-3">1</div>
    <div class="col-md-5 col-sm-push-4">2</div>
    <div class="col-md-4 col-sm-pull-5">3</div>
</div>

但小的结果是：中号和大号的顺序改变了，而不是小号

我的代码：https://www.w3schools.com/code/tryit.asp?filename=FFMTM73UDAWR

Answer 1

<div class="row">
  <div class="col=md-4">1</div>
  <div class="col=md-4">2</div>
  <div class="col=md-4">3</div>
</div>

简单地删除 push 和 pul bootstrap 移动设备优先，如果未指定 - 网格将占用所有 12 列因此，通过为每个 div 指定 col-md-4，您将告诉您使用 col-sm-12 和 col-xs-12 用于较小的屏幕。

Answer 2

在这种情况下，从手机开始

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div>
  <div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div>
  <div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div>
 </div>

如何使用推拉在小屏幕尺寸下更改 3 bootstrap 列的顺序？

How to change the order of 3 bootstrap columns at small screen size using push and pull?

twitter-bootstrap-3

push

pull