how to change alignment of div in mobile version - html

Question

I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. Please see the below images for better understand.
HTML
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
</div>
</div>
NOTE: I am using bootstrap 3
How to do that?
Anybody help please ?

Answer 1

You need to use Grid: column ordering
According to the mobile-first concept you need to define default view for mobile first in the right order.
section 1
section 3
section 2
Then assign col-md-push-3 for section 3 and col-md-pull-9 for section 2 and define its width using col-md- class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>

Answer 2

I answered something similar to this question before. reordering col-12 are not possible with bootstrap-3 (push/pull). You can use grid together with a media query to do this.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
css
#media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}

Answer 3

use col-sm-12 hopefully it will work

Answer 4

try this:
#media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}