中屏幕上的Bootstrap Pull div无法正常工作

Question

我每行有3个div，我只想将最后一个div移至顶部，将第二个div移至底部，并在中型设备中形成全宽。请看图片。

我尝试了自举式推拉类，但是没有运气。我在这里想念什么？

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <span>Test 1</span>
    </div>
    <div class="col-md-4 col-sm-push-6 col-sm-12">
      <span>Test 2</span>
    </div>
    <div class="col-md-4 col-sm-pull-6 col-sm-6">
      <span>Test 3</span>
    </div>
  </div>
</div>

span{
  border: 1px solid #ddd;
  display: block;
}

Jsfilddle

Answer 1

如果您使用order（https://developers.google.com/places/android-sdk/autocomplete）迁移到最新版本的引导程序，则可以轻松完成此操作

body {
    margin: 10px;
}

span{
  border: 1px solid #ddd;
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <span>Test 1</span>
    </div>
    <div class="col-md-4 order-sm-1 col-sm-12">
      <span>Test 2</span>
    </div>
    <div class="col-md-4  col-sm-6">
      <span>Test 3</span>
    </div>
  </div>
</div>

如果您想保留md的订单，也要这样

body {
    margin: 10px;
}

span{
  border: 1px solid #ddd;
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-0 col-sm-6">
      <span>Test 1</span>
    </div>
    <div class="col-md-4 order-sm-1 col-sm-12">
      <span>Test 2</span>
    </div>
    <div class="col-md-4 order-md-2  col-sm-6">
      <span>Test 3</span>
    </div>
  </div>
</div>

更新

使用Boostrap 3，您可以尝试以下操作：

body {
  margin: 10px;
}

span {
  border: 1px solid #ddd;
  display: block;
}

@media all and (min-width:767px) and (max-width:992px) {
  /*make the sm-6 inline-block and the float will move to the bottom*/
  .special .col-sm-6 {
    display: inline-block;
    float: none!important;
  }
  /*fix white space issue of inline-block*/
  .special {
    font-size: 0;
  }
  .special * {
    font-size: initial;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row special">
    <div class="col-md-4 col-sm-6">
      <span>Test 1</span>
    </div>
    <div class="col-md-4  col-sm-12">
      <span>Test 2</span>
    </div>
    <div class="col-md-4 col-sm-6">
      <span>Test 3</span>
    </div>
  </div>
</div>

Answer 2

希望我正确理解了这个问题，如果可以的话，这是否是理想的解决方案？

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6">
      <span>Test 1</span>
    </div>
    <div class="col-md-6 col-sm-6">
      <span>Test 3</span>
    </div>
  </div>
  <div>
    <div class="col-md-12 col-sm-12">
      <span>Test 2</span>
    </div>
  </div>
</div>