Html 中屏幕中的引导拉div不工作

我每行有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;
}

测试1
测试2
测试3
跨度{
边框：1px实心#ddd；
显示：块；
}

---

希望我正确理解了这个问题，如果是这样，这是理想的解决方案吗

<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>

测试1
测试3
测试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>

测试1
测试3
测试2

如果您使用

顺序迁移到最新版本的引导，则可以轻松完成此操作（）


正文{
利润率：10px；
}
跨度{
边框：1px实心#ddd；
显示：块；
}

测试1
测试2
测试3
如果您使用
顺序迁移到最新版本的引导，则可以轻松完成此操作（）


正文{
利润率：10px；
}
跨度{
边框：1px实心#ddd；
显示：块；
}

测试1
测试2
测试3
否。我不想更改列顺序。否。我不想更改列顺序。效果很好。但我用的是bootstrap3@Janath因此，可能是时候转移到4:）不确定你是否可以用3I正确地完成这项工作，因为我已经处于开发的末尾。所以我现在不能改变：（@Janath ok将添加一个hacky方式；）Bootstrap 3在许多情况下都很好地发挥作用，如果
行
容器只是制作成一个
flex
。。。例如，在大多数情况下，使用它可以很容易地实现等高列。将它添加到make
order
工作中，在这种情况下也会起作用，效果很好。但我用的是bootstrap3@Janath因此，可能是时候转移到4:）不确定你是否可以用3I正确地完成这项工作，因为我已经处于开发的末尾。所以我现在不能改变：（@Janath ok将添加一个hacky方式；）Bootstrap 3在许多情况下都很好地发挥作用，如果
行
容器只是制作成一个
flex
。。。例如，在大多数情况下，使用它可以很容易地实现等高列。在这种情况下，将其添加到make
order
工作中也会起到作用，