Bootstrap: Reordering Columns

Question

I'm trying make a grid with Bootstrap 3 that looks like the following.

Goal

SM

MD

Approach 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>

My problem here is that I don't know how to pull "Content 2" up in MD like so:

Approach 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>

The Problem here is, that I can't (or don't know how to) reorder it in SD, so that Sidebar appears between Content 1 and Content 2 or switch Content 2 with Sidebar.

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

Answer 1

If you're willing to add more CSS, combining the answer from the question below, and using pull-md-right to the sidebar to pull to the right in md, it shows as you ask

HTML (Based on Approach 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 (from 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/