Bootstrap：重新排序列

Question

我正在尝试使用Bootstrap 3创建一个如下所示的网格。

目标

SM

MD

方法1

<div class="container">
  <div class="row">
      <div class="col-md-9">
          <div class="alert alert-info">Content1</div>
      </div>
      <div class="col-md-3">
          <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
      </div>
      <div class="col-md-9">
          <div class="alert alert-info">Content2</div>
      </div>
  </div>
</div>

我的问题是，我不知道如何在MD中提取“内容2”，如下所示：

方法2

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-12">
          <div class="alert alert-info">Content1</div>
        </div>
        <div class="col-md-12">
          <div class="alert alert-info">Content2</div>
        </div>
      </div>
    </div>
   <div class="col-md-3">
     <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
   </div>
  </div>
</div>

这里的问题是，我不能（或者不知道如何）在SD中对它进行重新排序，以便侧边栏出现在 Content 1 和< em> Content 2 或使用补充工具栏切换 Content 2 。

https://jsfiddle.net/q7bc836a/3/

Answer 1

如果您愿意添加更多CSS，请将以下问题的答案结合起来，并使用select trim('.0' from '10.1.2.3.10'); 到侧边栏向右移动到md，它会在您询问时显示

HTML（基于方法1）：

pull-md-right

CSS（来自https://stackoverflow.com/a/21136667/5699206）：

  <div class="col-md-3 pull-md-right">
      <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div>
  </div>

https://jsfiddle.net/nbypupe6/