Twitter Bootstrap - Left column display after right container on mobile devices [duplicate] - css

Question

This question already has an answer here:
Issue with push/pulling my layout
(1 answer)
Closed 6 years ago.
This is my code:
<div class="row">
<div class="col-sm-12 col-lg-3">
A
</div>
<div class="col-sm-12 col-lg-9">
B
</div>
</div>
This is my template on desktop device:
+-------+-------+-------+-------+
| | |
| A | B |
| | |
+-------+-------+-------+-------+
This is my template on mobile device:
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
But I want my template to look like this on mobile device:
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
Is there any way to achieve this without having to change my initial structure?

Answer 1

You can use the col push & pull class to achieve this quite easily. There is a good explanation here which should help.
To spell it out, you need to move B above A, then pull A across 9 cols for large screen (col-lg-pull-9) and push B across 3 cols for larger screens( col-lg-push-3). Therefore, the code will be:
<div class="row">
<div class="col-sm-12 col-lg-9 col-lg-push-3">
B
</div>
<div class="col-sm-12 col-lg-3 col-lg-pull-9">
A
</div>
</div>
OK, reading your comments below, you stated you can't changes the order of the divs. Can you use jQuery? If so, try this:
$(document).ready(function(){
if ($(window).width() < 768){
alert("mobile");
$("#divB").insertBefore("#divA");
}
else {
alert("not mobile");
}
});
http://jsfiddle.net/humotrj0/173/

Answer 2

You can change the order in the HTML (first div B), being this the order for mobile, and change the order in desktop with col-lg-push-* and col-lg-pull-*.
See http://getbootstrap.com/css/#grid-column-ordering

Answer 3

You need to use the col-lg-push and col-lg-pull options
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<div class="row">
<div class="col-lg-9 col-lg-push-3">
B
</div>
<div class=" col-lg-3 col-lg-pull-9">
A
</div>
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right. View it working in Bootsnipp