Twitter bootstrap need left column rows to split in 2 and contain mid and right cols in md/sm transition

Question

I need to nest columns 2-middle and 3-right in between the rows of column1-left's rows on a layout:

I have a layout as such,

column 1      column 2   column 3
------        --------   --------
Image1        Image4     Image6
Image2&3      Image5     Image7

I need it to change to:

col 1
-------
Image1
Image4
Image5
Image6
Image7
Image2&3

at the sm/md boundry

any suggestions, and is there a word for this?

Answer 1

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>