This is a little different but to show column 2 then 1 then 3 on the larger screen then switch to see column's listed in 1 then 2 then 3 on the smaller screen use this:
Using the push and pull in bootstrap will align the columns the way you wish.
<!-- Column 1 -->
<div class="col-md-4 col-md-push-4">
<img src="#" alt="image1"><br/>
<img src="#" alt="image2"><br/>
<img src="#" alt="image3">
</div>
<!-- Column 2 -->
<div class="col-md-4 col-md-pull-4">
<img src="#" alt="image4"><br/>
<img src="#" alt="image5">
</div>
<!-- Column 3 -->
<div class="col-md-4">
<img src="#" alt="image6"><br/>
<img src="#" alt="image7">
</div>