JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <div class="container">
        <h1>Column Ordering <small>Bootstrap 3</small></h1>
        <div class="row">
			<div class="well well-lg clearfix">
				<div class="col-xs-12 col-md-4 col-md-push-4">
					<div class="alert alert-warning">
						2
					</div>
				</div>
				<div class="col-xs-6 col-md-4 col-md-pull-4">
					<div class="alert alert-danger">
						1
					</div>
				</div>
				<div class="col-xs-6 col-md-4">
					<div class="alert alert-danger">
						3
					</div>
				</div>
			</div>
        </div>
        <div class="row">
            <div class="well well-lg clearfix">
				<div class="col-xs-6 col-md-4">
					<div class="alert alert-danger">
						1
					</div>
				</div>
				<div class="col-xs-6 col-md-4 col-md-push-4">
					<div class="alert alert-danger">
						3
					</div>
				</div>
				<div class="col-xs-12 col-md-4 col-md-pull-4 ">
					<div class="alert alert-warning">
						2
					</div>
				</div>
			</div>
        </div>
    </div>

CSS

h1 {
    text-align: center;
    margin-bottom: 20px;
}