BootStrap how can in reverse div's order? - html

Question

I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering

Answer 1

What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.

Answer 2

As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example