css - Bootstrap : Reordering Columns

Question

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

目标

SM

医学博士

方法一

<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”:

方法二

<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 和 < em>内容 2 或将 内容 2 切换为 侧边栏。

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

Answer 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/