Bootstrap move one element below another in mobile devices - html

Question

I am having the following layout for my website and is built using responsive Bootstrap.
Now when I view it in a mobile device it comes in the following order:
HEADER
FORM
PROMOTIONS
INFORMATION
FOOTER
However, I don't want the promotions feature to come below the form for a mobile device. Instead I need the information section to come after the form and then the promotions section and then the footer.
Is there a way to achieve this using #media query?

Answer 1

I think, if you can control height of promotion block, this example can help you:
http://jsfiddle.net/vXb95/
<div id="header" class="bordered">header</div>
<div class="content">
<div id="form" class="bordered">form</div>
<div id="info" class="bordered">infomation</div>
<div id="promotion" class="bordered" >promotion</div>
</div>
<div id="footer" class="bordered">footer</div>
.bordered{
border:1px solid #333;
text-align: center;
min-height: 50px;
padding: 10px;
margin-bottom: 10px;
}
.content{
position:relative;
}
#form{
margin-right: 35%;
}
#promotion{
position: absolute;
right: 0;
top: 0;
width: 30%;
}
#media screen and (max-width: 400px) {
#promotion{
position: static;
width: auto;
}
#form{
margin-right: 0;
}
}

Answer 2

Live Demo
A dumb way to do this is by duplicating the promotional features part and showing/hiding them by media queries:
HTML
<div id="header">header</div>
<div id="form">form</div>
<div id="promotion">promotion</div>
<div id="info">info</div>
<div id="promotion2">promotion</div>
<div id="footer">footer</div>
CSS
#promotion2 { display: none; }
#media (max-width: 400px) {
#promotion { display: none; }
#promotion2 { display: block; }
}