重新排序div响应

Question

我知道col-md / xs / sm / lg，以及Bootstrap的推/拉功能。

我有以下问题：

<div class="row">
  <div class="col-md-7">
    ..content here..
  </div>
  <div class="col-md-5">
    <div class="row">
      <div class="col-md-12">
      ..content that when on responsive needs to be rendered first..
      </div>
    </div>
    <div class="row">
       ..rest of the content..
    </div>
  </div>
</div>

在线版：http://codepen.io/anon/pen/wJijn

我希望在我们使用小尺寸屏幕时首先拉出col-md-12内容，并且首先拉出“内容的内容......”。

要求：

1. 不要'使用绝对位置
2. 使用引导方式执行此操作
3. 最糟糕的情况：使用minimal extra css
4. 如果您建议HTML重新订购，请确保它可以正常工作

我在之前/之后附加了两个草图，以便让它更易于理解。之后：

Answer 1

你的图片有点难以破译，但我想我明白你的目标......

DEMO http://www.bootply.com/rwwiuNalrr

<div class="row">
  <div class="col-md-12 bg-warning">Header</div>
  <div class="col-xs-12 col-md-5 pull-right bg-danger">Column 1</div>
  <div class="col-xs-12 col-md-7 bg-success">Column 2</div>
  <div class="col-xs-12 col-md-5 pull-right bg-info">Column 3</div>
</div>

一些注意事项：

• 当你说＆＃34;做出回应时＃34;我认为你的意思是＆＃34;在移动设备上＃34;在这种情况下，考虑到这一点，开始你的HTML是件好事，因为BS3首先是移动设备＆＃34;。并不总是有效，但通常情况确实如此。

• 您的图形和标记建议您希望column1和column3位于同一个div中。从布局POV不是必需的，并且难以在移动设备上将它们分开。在这里，我将它们直观地连接起来，而不是将它们嵌入另一个中。

• 您通常不必申报col-xs-12，因为它是默认设置，但由于我们使用了拉动右边的布局，我们必须明确。