html - Bootstrap grid pull/push rows -

i have responsive bootstrap grid want shown in different order depending on device width.

sm or lower:

-------------- |      1     | -------------- |      2     | -------------- |      3     | -------------- |      4     | -------------- |      5     | -------------- |      6     | -------------- |      7     | -------------- 

md or higher:

------------- | 2 | 4 | 6 | ------------- |     1     | ------------- | 3 | 5 | 7 | ------------- 

my problem col-pull , col-push moves column sides, not , down.

this have far:

  <div class="row">     <div class="col-md-12">1</div>     <div class="col-md-4">2</div>     <div class="col-md-4 col-md-push-4">3</div>     <div class="col-md-4 col-md-pull-4">4</div>     <div class="col-md-4 col-md-push-4">5</div>     <div class="col-md-4 col-md-pull-4">6</div>     <div class="col-md-4">7</div>   </div> 

, displays correctly in small displays on big ones displays following:

------------- |     1     | ------------- | 2 | 4 | 3 | ------------- | 6 | 5 | 7 | ------------- 

i need swap first , second rows, , swap column 3 column 6. how can achieve this?

thank much

you may not have duplicate elements, ones want hide/show. along lines of:

<div class="container-fluid">     <div class="row">         <div class="col-xs-12 col-md-12 visible-xs">1</div>     </div>     <div class="row">         <div class="col-xs-12 col-md-4">2</div>         <div class="col-xs-12 col-md-4 col-md-push-4">3</div>         <div class="col-xs-12 col-md-4 col-md-pull-4">4</div>     </div>     <div class="row">         <div class="col-xs-12 col-md-12 hidden-xs">1</div>     </div>     <div class="row">         <div class="col-xs-12 col-md-4 col-md-push-4">5</div>         <div class="col-xs-12 col-md-4 col-md-pull-4">6</div>         <div class="col-xs-12 col-md-4">7</div>     </div> </div> 

see fiddle