bootstrap reorganising coloumns on media change

Question

Thanks for the updates. I'll provide more information. The solution provided works. I should have added more information as it is a little more complex which I did not realise at the time.

Column A is a blurb Column B is a green box Column C is a yellow box Column D is blurb 2 Column E is a green box Column F is a yellow box.

I've got the following table/column structure in bootstrap as shown below. On a desktop it is essentially:

A | B | C  
D | E | F

What I would like to do is have it rearrange when condensed to a medium sized view eg tablet it looks

|   A   |  
| B | C |  
| E | F |  
|   D   | << out of its natural order

This way it goes, blurb, green, yellow, green, yellow, blurb 2.

And then on a mobile browser

A  - blurb 1
B  - green
C  -yellow
F - green   << out of order 
E - yellow  << out of order
D - blurb 2 << out of its natural order

I have tried the push and pull with bootstrap but I think I am doing it wrong as it always distorts the grid.

any help would be most appreciated.

Thanks in advance.

<div class="container">
    <div class="row clearfix">
        <div class="col-lg-4 col-md-12 col-sm-12 banner-box1">
                               
                
            A - blurb 1
                
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-green">
            B - Green
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-yellow">
            C - Yellow
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-lg-4 col-md-12 col-sm-12 banner-box3">
            D - Blurb 2
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-yellow">
            E - Green
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12 banner-box-green">
            F - Yellow
        </div>
    </div>
</div>

Answer 1

Try arranging your rows and columns like this:

<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-4">
      <p>A</p>
    </div>
    <div class="col-md-6 col-lg-4">
      <p>B</p>
    </div>
    <div class="col-md-6 col-lg-4">
      <p>C</p>
    </div>
    <div class="col-md-6 col-lg-4 col-lg-push-4">
      <p>E</p>
    </div>
    <div class="col-md-6 col-lg-4 col-lg-push-4">
      <p>F</p>
    </div>
    <div class="col-md-12 col-lg-4 col-lg-pull-8">
      <p>D</p>
    </div>
  </div>
</div>

Here's a bootply example: http://www.bootply.com/z0ZorgkTOR