bootsrap 3.1 pull main content first (on TOP) when mobile - html

Question

I have following grid structure
<div class="row">
<div id="A" class="col-md-3">
<div class="alert alert-info">A</div>
</div>
<div id="B" class="col-md-6">
<div class="alert alert-danger">B</div>
</div>
<div id="C" class="col-md-3">
<div class="alert alert-info">C</div>
</div>
</div>
I want to show B first when mobile (But when big device other than mobile then it should show as above) and also WHEN mobile all A,B,Cwill be in equal width. I have tried as following
<div class="col-md-3 col-md-push-6">
<div class="alert alert-info">A</div>
</div>
<div class="col-md-6 col-md-pull-3">
<div class="alert alert-danger">B</div>
</div>
<div class="col-md-3">
<div class="alert alert-info">C</div>
</div>
Also tried in many combination nothing working
WHEN big screen like desktop
When mobile

Answer 1

Try this one :
<div class="col-sm-6 col-sm-push-3">
<div class="alert alert-danger">B</div>
</div>
<div class="col-sm-3 col-sm-pull-6">
<div class="alert alert-info">A</div>
</div>
<div class="col-sm-3">
<div class="alert alert-info">C</div>
</div>
Or DEMO here.

Answer 2

I used javascript to implement this functionality. I am first finding bootstrap environment and according to it i am arranging divs.
var current='';
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
if(findBootstrapEnvironment()=="sm"&&findBootstrapEnvironment()!=current){
current=findBootstrapEnvironment();
var a=$('.row').children()[0];
var b=$('.row').children()[2];
$('.row').children()[0].remove();
$('.row').children()[1].remove();
$('.row').append(a);
$('.row').append(b);
console.log(current);
}
$( window ).resize(function() {
if((findBootstrapEnvironment()=="sm"||findBootstrapEnvironment()=="md")&&findBootstrapEnvironment()!=current){
current=findBootstrapEnvironment();
var a=$('.row').children()[0];
var b=$('.row').children()[2];
$('.row').children()[0].remove();
$('.row').children()[1].remove();
$('.row').append(a);
$('.row').append(b);
console.log(current);
}
});
Demo : https://jsfiddle.net/oog0gdph/

Answer 3

<div class="col-xs-12 col-sm-6 col-sm-push-4 " >B</div>
<div class="col-xs-12 col-sm-pull-6 col-sm-3" >A</div>
<div class="col-xs-12 col-sm-3">C</div>