Changing div order at bootstrap - html

Question

I've an issue at my project. At one of my page, I'm using a markup like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/RW747/
So, it'll look like this at desktop:
But, it looks at mobile like this:
It should be like that as bootstrap's responsive layout. No doubt with that. But, definitely, I need step 1, 2 and 3 in serial (not step 1, 3, 2) at mobile:
This will be generated if I arranged my HTML code like this:
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
</div>
</div>
Fiddle: http://jsfiddle.net/learner73/gLjG4/
Now, at mobile, it looks perfect. But, at problem is at the desktop, if the height of "step 2" content is high, it push the "step 3" content below much:
But, it should be like my first image.
Have bootstrap classes or event to handle scenario like this? If not how can I handle this issue properly? Thanks in advance.

Answer 1

Try offsett or column ordering classes.
Now i've tested column responsive reset, it works for your intent
<div class="row">
<div class="col-md-6">
<h2>Step 1</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="col-md-6">
<h2>Step 2</h2>
<p>Some text</p>
<p>Some text</p>
</div>
<!-- reset -->
<div class="clearfix visible-md"></div>
<!-- reset -->
<div class="col-md-6">
<h2>Step 3</h2>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
here the fiddle http://jsfiddle.net/keypaul/9nh86/

Answer 2

You can style it better, but here is an approach using jQuery
Basically, I've splited it into independent divs named "one", "two" and "three", and used this:
$(window).resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if(winWidth <= 986) {
$("#two").insertBefore("#three");
} else {
$("#three").insertBefore("#two");
}
});
http://jsfiddle.net/XF6Uq/3/
Here you have another approach. Instead of using insertBefore, I'm using classes.
Basicaly, you float left every div, but the "Step 2" one, you change it to float right when it's "desktop wide"
http://jsfiddle.net/hige/3TPec/
Hope it helps!