te he encontrado una solución usando media queries
Código HTML:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
@media (max-width: 767px) {
.container{display: table; width: 100%;}
.first{display: table-footer-group;}
.second{display: table-header-group;}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
Columna 1
</div>
<div class="col-sm-6 col-md-3 col-md-push-3 first">
Columna 3
</div>
<div class="col-sm-6 col-md-3 col-md-pull-3 second">
Columna 2
</div>
<div class="col-sm-6 col-md-3">
Columna 4
</div>
</div>
</div>
</body>
</html> aquí está explicado el problema
http://blog.developers.ba/bootstrap-...order-columns/