change col position in html - html

Question

i have this code
<div class="row">
<div class="col-xs-12">
<div class="col-md-6">
<div class="col-sm-7">
Content B
</div>
<div class="col-sm-5">
<img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
</div>
</div>
<div class="col-md-6">
<div class="col-sm-5">
Content A
</div>
<div class="col-sm-7">
Content C
</div>
</div>
</div>
</div>
and it's displayed
desktop
----b----|--d--|--a--|----c----
mobile
b
d
a
c
i want in mobile mode displaying
d
b
a
c
I have been read this article, but i still cannot understand, maybe someone can explain to me?

Answer 1

Here is the code, i used flex to make it work. don't forget to put the code inside the media query #media all and (max-width:767px) or whatever you want
.col-row{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
/* use the below code under mobile media query */
.col-b {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.col-row img{
width: 30px;
}
.col-xs-12 {
text-align: center;
}
.col-row {
align-items: center;
}
.col-d {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
#media all and (max-width:320px){
.col-row {
align-items: center;
}
}
<div class="row">
<div class="col-xs-12">
<div class="col-md-6 col-row">
<div class="col-sm-7 col-b">
Content B
</div>
<div class="col-sm-5 col-d">
<img src="https://www.ipbrick.com/wp-content/uploads/2013/12/cloud.png" />
</div>
</div>
<div class="col-md-6">
<div class="col-sm-5">
Content A
</div>
<div class="col-sm-7">
Content C
</div>
</div>
</div>
</div>

Answer 2

If you can swap around the B and D columns in the HTML and then use the bootstrap css classes to push and pull the columns to they are arranged differently on desktop and then go back to their 'normal' order on mobile:
<div class="row">
<div class="col-xs-12">
<div class="col-md-6">
<div class="col-sm-5 col-sm-push-7">
Content d
</div>
<div class="col-sm-7 col-sm-pull-5">
Content B
</div>
</div>
<div class="col-md-6">
<div class="col-sm-5">
Content A
</div>
<div class="col-sm-7">
Content C
</div>
</div>
</div>
</div>