css - 在响应式上重新排序 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. 使用 Bootstrap 方式来做到这一点
3. 最坏情况:使用最少的额外 css
4. 如果您建议对 HTML 进行重新排序，请确保它有效

我在之前/之后附上了两个草图，我希望它如何排序以使事情更容易理解。 之后:

Answer 1

你的图形有点难以破译，但我想我明白你要做什么......

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

一些注意事项:

• 当您说“响应式”时，我假设您的意思是“在移动设备上”，在这种情况下，最好在开始您的 HTML 时牢记这一点，因为 BS3 是“移动设备优先”。并不总是奏效，但通常如此，这次奏效了。

• 您的图形和标记表明您希望 column1 和 column3 位于同一 div 中。从布局 POV 来看，这不是必需的，并且很难在移动设备上将它们分开。在这里，我在视觉上将它们联系起来，而没有将一个嵌入另一个。

• 您通常不必声明 col-xs-12，因为它是默认值，但由于我们使用右拉扰乱了布局，所以我们必须明确声明。