使用bootstrap在不同的视口中定位div

Question

我正在使用bootstrap 3，我想创建三个div，根据当前视口改变它们的位置。我认为这应该是可能的，但不知怎的，我不能总结如何使用bootstrap建立这个。所以我有3个div，让我们称之为img text和ex。 我希望它们适用于不同的视口，如下图所示。

我玩过拉动和推动，但这似乎并没有解决我的问题。我正在寻找一个“上拉类”，以便我可以移动例如一个div向右（使用推）然后能够向上移动它。

这是一个仍然不起作用的例子。

 <div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
    img
  </div>
  <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
    text
  </div>
  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
    exp
  </div>
</div>

编辑1：此代码是此问题的答案之一，它正是针对问题的核心。我更新了示例图像并添加了另一个来说明问题。 此代码产生此行为（请注意sm视图右侧的空白区域）

编辑2：接受的答案为固定大小的文本img，exp提供了解决方案。

Answer 1

对于您想要的行为，您需要使用bootstrap push和pull类。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-6">
    img
  </div>
  <div class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-6 col-md-pull-6">
    text
  </div>
  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-md-6 col-md-push-0">
    exp
  </div>
</div>

您可以在此处看到它：http://www.bootply.com/CNGe5KxWxK

有关推拉的更多信息，请访问：http://getbootstrap.com/css/#grid-column-ordering