Bootstrap Grid Order - horizontally stack columns in sidebar that are split above and below main content on small devices

Question

On medium and up screen sizes, I would like my content on the left and my sidebar content on the right. On smaller devices I would like some sidebar content above the main content, and the rest below. As far as I can tell, this gets me close. I just need to get the last sidebar to float up next to the content on desktop view. But, it isn't cooperating. Another solution would be to add visible and hidden classes with duplicate content. I'm not interested in that solution.

.content {
  margin: 10px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.main-content {
  background-color: #eee;
  height: 400px;
}

.sidebar-a {
  background-color: red;
  height: 200px;
  color: #fff;
}

.sidebar-b {
  background-color: blue;
  height: 200px;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-a">
                  Sidebar A
                </div>
            </div>
            <div class="col-md-8 pull-up col-md-pull-4">
                <div class="content main-content">
                  Main Content
                </div>
            </div>
            <div class="col-md-4 col-md-push-8">
                <div class="content sidebar-b">
                  Sidebar Content B
                </div>
            </div>
        </div>
    </div>

I'm trying to float sidebar b right in hopes in comes up next to the content. At that point the push class is unnecessary. The result on desktop is visually the same as the above.