Changing the stacking order in bootstrap 3 - html

Question

At the xs width I need column two to display on top followed by column one then three. I've tried using push and pull to achieve this but it hasn't worked for me, what happens it the columns are pushed outside the container to the right and left.
Heres my code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 one"></div>
<div class="col-xs-12 col-sm-4 two"></div>
<div class="col-xs-12 col-sm-4 three"></div>
</div>
</div>
.one{
background-color: red;
height: 50px;
}
.two{
background-color: green;
height: 50px;
}
.three{
background-color: blue;
height: 50px;
}

Answer 1

Use flexbox.
.row {
display: flex;
flex-direction: column;
}
.one {
background-color: red;
height: 50px;
order: 2;
}
.two {
background-color: green;
height: 50px;
order: 1;
}
.three {
background-color: blue;
height: 50px;
order: 3;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 one"></div>
<div class="col-xs-12 col-sm-4 two"></div>
<div class="col-xs-12 col-sm-4 three"></div>
</div>
</div>

Answer 2

You can achieve that with .col-xx-pull- and .col-xx-push- built-in grid classes. Think mobile first and place the "2" col first in your html and then use pull-push:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-4 two">2</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 one">1</div>
<div class="col-xs-12 col-sm-4 three">3</div>
</div>
</div>
.one {
background-color: red;
height: 50px;
}
.two {
background-color: green;
height: 50px;
}
.three {
background-color: blue;
height: 50px;
}
jsfiddle

Answer 3

The push and pull classes are not used for ordering.
You can achieve your desired result in a multiple of ways:
Javascript/jQuery. Check out the methods insertBefore and insertAfter.
use flexbox. Using flexbox gives you access to the property "order".
My pick would be Flexbox.
For more info on this check https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've made the following element swapping function for you which should be used as a jQuery function in case you don't want to use flexbox.
(function ($) {
$.fn.swapElements = function (opties) {
//Variables
var settings = $.extend({
targetResolution: 768, //Trigger swapping of elements on this resolution
changeWith: '', //Which element should be swapped $('#object2')
changeSpeed: 30,
resize: true //Check for resize event
}, opties);
var a = this;
var b = settings.changeWith;
var tmp = $('<span>').hide();
var doSwap = function () {
var windowWidth = $(window).width();
var firstElement = $('#' + a.attr('id') + ', #' + settings.changeWith.attr('id')).first().eq(0).attr('id');
if (windowWidth <= settings.targetResolution && firstElement === a.attr('id')) {
a.before(tmp);
b.before(a);
tmp.replaceWith(b);
} else if (windowWidth > settings.targetResolution && firstElement === b.attr('id')) {
b.before(tmp);
a.before(b);
tmp.replaceWith(a);
}
}
$(document).ready(function () {
doSwap();
});
if (settings.resize) {
//Check on resize
$(window).resize(function () {
clearTimeout($.data(this, 'resizeTimer'));
$.data(this, 'resizeTimer', setTimeout(function () {
doSwap();
}, settings.changeSpeed));
});
}
return this;
};
}(jQuery));
Which can be used like this:
$('#el1').swapElements({
changeWith: $('#el2'),
// changeSpeed: 30,
// targetResolution: 768,
// resize: true
});