Reordering divs on responsive - css

Question

I am aware of the col-md/xs/sm/lg, as well as push/pull capabilities of Bootstrap.
I have the following issue:
<div class="row">
<div class="col-md-7">
..content here..
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
..content that when on responsive needs to be rendered first..
</div>
</div>
<div class="row">
..rest of the content..
</div>
</div>
</div>
Online version: http://codepen.io/anon/pen/wJijn
I want the the col-md-12 content to be pulled first when we're on small screen sizes, WITOUT the "..rest of the content.." also being pulled first.
Requirements:
dont' use position absolute
use a bootstrap way to do this
worst case scenario: use minimal extra css
if you suggest an HTML re-ordering make sure it will work
I am attaching two sketches the before/after how I want it to order to make things easier to understand. After:

Answer 1

Your graphics are a little hard to decipher, but I think I understand what you're going for...
DEMO http://www.bootply.com/rwwiuNalrr
<div class="row">
<div class="col-md-12 bg-warning">Header</div>
<div class="col-xs-12 col-md-5 pull-right bg-danger">Column 1</div>
<div class="col-xs-12 col-md-7 bg-success">Column 2</div>
<div class="col-xs-12 col-md-5 pull-right bg-info">Column 3</div>
</div>
Some notes:
When you say "goes responsive" I assume you mean "on mobile", in which case, it's good to start your HTML with that in mind, since BS3 is "mobile first". Doesn't always work, but usually, and this time it did.
Your graphics and markup suggest you want column1 and column3 to be within the same div. From a layout POV that's not necessary and makes it difficult to separate them on mobile. Here I have connected them visually without embedding one in the other.
You don't normally have to declare col-xs-12 since it's the default, but because we've messed with the layout by using pull-right, we have to be explicit.