Bootstrap 3 - Layout

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="text-center">
    <h2 class="visible-xs">xs</h2>
    <h2 class="visible-sm">sm</h2>
    <h2 class="visible-md">md</h2>
    <h2 class="visible-lg">lg</h2>
</div>

<div class="container">
    <div class="row myRow">
        <div class="col-xs-12 col-sm-6 col-md-4">1</div>
        <div class="col-xs-12 col-sm-6 col-md-4 middleDiv">2</div>      
        <div class="col-xs-12 col-sm-6 col-md-4">3</div>
    </div>
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24869487/1366033'>Change section order with Bootstrap 3</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
<div>

CSS

.myRow > div {
    border: 1px solid black;
    height: 25px;
}

@media (min-width: 768px) and (max-width: 991px) { 
    div.middleDiv {
       height: 50px;
       float: right;
    }
}