Swap divs(Column Children) in Different Columns in Responsive - html

Question

I have bootstrap column arrangement as following and have few divs with different height inside the columns.
HERE IS THE CODEPEN
.column>div {
border: 1px solid #333;
background: #ddd;
color: white;
padding: 15px;
margin: 5px 0;
text-align: center;
font-size: 18px;
}
div#child-1 {
height: 150px;
}
div#child-2 {
height: 50px;
}
div#child-3 {
height: 50px
}
div#child-4 {
height: 100px;
}
div#child-5 {
height: 100px;
}
div#child-6 {
height: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 column">
<div id="child-1">1</div>
<div id="child-3">3</div>
<div id="child-5">5</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 column">
<div id="child-2">2</div>
<div id="child-4">4</div>
<div id="child-6">6</div>
</div>
</div>
</div>
When it comes to mobile devices, I need to use col-xs-12 for each columns.
Now I need to have the following structure formed in the responsive #child-1, #child-2, #child-3, #child-4, #child-5, #child-6.
But for now I have the pattern mixed as #child-1, #child-3, #child-5, #child-2, #child-4, #child-6.
How can I swap these elements to the alignment that I wanted?

Answer 1

I think float can be helpful for such layout then on small device you can switch to flexbox (or even CSS-grid) and adjust the order. The main trick is to have all the elements inside one container so that you can easily handle them:
.container {
max-width:1124px;
margin:auto;
}
.column>div {
border: 1px solid #333;
background: #ddd;
color: white;
padding: 15px;
margin: 5px;
text-align: center;
font-size: 18px;
box-sizing:border-box;
width:calc(50% - 10px);
}
div#child-1 {
height: 150px;
float:left;
}
div#child-2 {
height: 50px;
float:right;
}
div#child-3 {
height: 50px;
float:left;
}
div#child-4 {
height: 100px;
float:right;
}
div#child-5 {
height: 100px;
float:left;
}
div#child-6 {
height: 150px;
float:right;
}
#media (max-width:767px) {
.container {
display:flex;
flex-direction:column;
}
.column > div {
width:auto;
}
#child-1 {order:1}
#child-2 {order:2}
#child-3 {order:3}
#child-4 {order:4}
#child-5 {order:5}
#child-6 {order:6}
}
<div class="container column">
<div id="child-1">1</div>
<div id="child-2">2</div>
<div id="child-4">4</div>
<div id="child-3">3</div>
<div id="child-6">6</div>
<div id="child-5">5</div>
</div>