【问题标题】：Bootstrap: Reordering Columns引导程序：重新排序列
【发布时间】：2016-09-10 22:09:17
【问题描述】：

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

目标

医学博士

方法 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 中重新排序，所以 Sidebar 出现在 Content 1 和 Content 2 或用 Sidebar 切换 Content 2。

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果你愿意添加更多的 CSS，结合下面问题的答案，并在侧边栏使用pull-md-right 拉到 md 的右侧，它会显示为你的要求

HTML（基于方法 1）：

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

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

@media (min-width: 992px) and (max-width: 1199px) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

https://jsfiddle.net/nbypupe6/

【讨论】：