Bootstrap complex column position ordering - css

Question

Is it possible to pull/push divs of a column from another column in Bootstrap grid system? For example:
At desktop view: it's like this way:
Parent Column 1 | Parent Column 2
First Content | Second Content
Third Content | Fourth Content
At mobile view, it's like this way:
Parent Column 1
First Content
Second Content
Parent Column 2
Third Content
Fourth Content
Please take a look on this fiddle to understand what I am trying to mean.Thanks in advance.

Answer 1

You can achieve it by using bootstrap's grid.
.first {
background: yellow;
height: 300px;
}
.second {
background: red;
height: 100px;
color: white;
}
.third {
background: green;
height: 300px;
color: white;
}
.fourth {
background: blue;
height: 100px;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 first">
FIRST
</div>
<div class="col-sm-6 col-xs-12 second">
SECOND
</div>
<div class="col-sm-6 col-xs-12 third">
THIRD
</div>
<div class="col-sm-6 col-xs-12 fourth">
FOURTH
</div>
</div>
</div>
Or you can use Masonry JS:
var $container = $('.masonry-container');
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
.first {
background: yellow;
height: 300px;
}
.second {
background: red;
height: 100px;
color: white;
}
.third {
background: green;
height: 300px;
color: white;
}
.fourth {
background: blue;
height: 100px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row masonry-container">
<div class="col-sm-6 col-xs-12 first item">
FIRST
</div>
<div class="col-sm-6 col-xs-12 second item">
SECOND
</div>
<div class="col-sm-6 col-xs-12 third item">
THIRD
</div>
<div class="col-sm-6 col-xs-12 fourth item">
FOURTH
</div>
</div>
</div>

Answer 2

I think the issue is more of a float problem because your columns have variable height. Create a special class to pull the 2nd and 3rd columnd right on larger screens..
#media (min-width: 992px) {
.pull-md-right {
float:right;
}
}
And, use it like this..
<div class="row">
<div class="col-md-6">
<div class="first">First</div>
</div>
<div class="col-md-6 pull-md-right">
<div class="second">Second</div>
</div>
<div class="col-md-6 pull-md-right">
<div class="third">Third</div>
</div>
<div class="col-md-6">
<div class="fourth">Fourth</div>
</div>
</div>
http://codeply.com/go/CYteNdheKS
In Bootstrap 4, responsive floats are included so you won't need the extra CSS.