Colum ordering
In desktop the order of color is blue, black, yellow, red, green.
In mobile the color order is blue, black, yellow, red, green.
by Satheesh Kumar
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="row">
<div class="col-xs-12">
<div class="blue"></div>
</div>
</div>
<div class="row">
<div class="col-sm-9 aft-col">
<div class="row">
<div class="col-sm-8">
<div class="black"></div>
</div>
<div class="col-sm-4 yellow-bar">
<div class="yellow"></div>
</div>
<div class="col-sm-12">
<div class="green"></div>
</div>
</div>
</div>
<div class="col-sm-3 red-bar">
<div class="red"></div>
</div>
</div>
CSS
.blue {
background-color: blue;
min-height: 30px;
}
.black {
background-color: black;
min-height: 30px;
}
.yellow {
background-color: yellow;
min-height: 30px;
}
.red {
background-color: red;
min-height: 30px;
}
.green {
background-color: green;
min-height: 30px;
}
JavaScript
$(document).ready(function(){
var winWidth = $(window).width();
if (winWidth < 767) {
console.log('Less than 767');
$(".red-bar").insertAfter(".yellow-bar");
}
else {
console.log('More than 960');
$(".red-bar").insertAfter(".aft-col");
}
});
$(window).resize(function() {
var winWidth = $(window).width();
if (winWidth < 767) {
console.log('Less than 767');
$(".red-bar").insertAfter(".yellow-bar");
}
else {
console.log('More than 960');
$(".red-bar").insertAfter(".aft-col");
}
});