Bootstrap 3: Push/pull columns only on smaller screen sizes

Question

I have the following layout on a page:

<div class="col-lg-3">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-2">4</div> <div class="col-lg-3">5</div>   --------- ----- ----- ----- --------- |    1    |  2  |  3  |  4  |    5    |  --------- ----- ----- ----- --------- 

But on smaller screen sizes I would like the following layout:

<div class="col-xs-6">1</div> <div class="col-xs-6">5</div> <div class="col-xs-4">2</div> <div class="col-xs-4">3</div> <div class="col-xs-4">4</div>   ----------------- ----------------- |        1        |        5        |  ----------------- ----------------- |     2     |     3     |     4     |  ----------- ----------- ----------- 

(Note the re-arranging of the column order.) Is it possible to push/pull columns only on smaller screen sizes? I've tried the following, but I get the oddest layout, and seem to lose <div>5</div> completely...:

<div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-2 col-xs-4 col-xs-push-4">2</div> <div class="col-lg-2 col-xs-4>3</div> <div class="col-lg-2 col-xs-4>4</div> <div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div> 

Answer 1

Answered it myself, simply by thinking: mobile first!

<div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-3 col-xs-6 col-lg-push-6">5</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div> 

Get them in the order I want on the tablet first, then push/pull them in to position on the desktop.