Changing the stacking order of columns in Twitter’s Bootstrap 3 is actually easier than you may think. Excited yet? Calm down.

Below is an example situation where you may want to change the stacking order. We have a nice 2 column row that has text on the left and an image on the right. This is a common setup that many websites use.

<div class="row row-fluid">
	<div class="col-md-6">
		<h1>Headline</h1>
		<p>Lorem ipsum text of doom</p>
	</div>
	<div class="col-md-6">
		<img src="some-image.png">
	</div>
</div>

Both the text and image each take up 6 grid columns (so they’re equal spacing). When the browser is sized to medium, the headline is on top. Depending on your layout, that’s fine. But what if we want the image to be on top instead, while keeping the initial text on the left and image on the right for larger screens? Well, we reverse the order and then push and pull ’em (float) into their correct spots!

<div class="row row-fluid">
	<div class="col-md-6 col-md-push-6">
		<img src="some-image.png">
	</div>
	<div class="col-md-6 col-md-pull-6">
		<h1>Headline</h1>
		<p>Lorem ipsum text of doom</p>
	</div>
</div>

This works because when there’s enough space, they float into their original positions at first. However, when sized to medium and space is lost, they then stack since they can’t float through eachother. Note that while I used 6 grid columns for both, this works even if they are NOT both 6 columns.

Incoming search terms:

• Bootstrap3:ChangeStackingOrder|AGeekandHisBlog