responsive design more than 2 column use order bootstrap3

Question

Using bootstrap 3 I have some questions about push/pull with column ordering. Here's what I am after: now(in large size)

    .          .         .                                 
l   .    c     .     r   .                    
    .          .         .

to (in small size)

  .                   .                                     
  .         c         .                       
  .                   . 

  .        .          .                               
  .    l   .   r      .
  .        .          .

help me please?

Do you have any HTML to show us? It helps to see what you have attempted. — Cobote, Jul 28 '14 at 11:09
possible duplicate of [Pushing column to next line with col-md-push-\*](http://stackoverflow.com/questions/22839869/pushing-column-to-next-line-with-col-md-push) — Cobote, Aug 01 '14 at 13:37

Cobote · Accepted Answer · 2014-08-01T13:42:20.483

0

Use col-xs-* for the smallest display layout. Change col-lg-* to col-sm-* so that Bootstrap uses this style for all other display sizes.

Setting col2 to col-xs-12 will force the other elements to be on a new row.

By moving col2 to be the first item, you can use col-sm-push-* & col-sm-pull-* to move it to the second position on larger display sizes.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-2">col2</div>      
  <div class="col-xs-6 col-sm-2 col-sm-pull-6">col1</div>
  <div class="col-xs-6 col-sm-4">col3</div>
</div>

Using the BootStrap Grid Options.

edited Aug 01 '14 at 13:42

answered Jul 31 '14 at 11:09

Cobote

385
2
12

this code push the first column (col-sm-2) up and center column and right column in blow of first column ,but i wanna center col move to up – Sepideh Aug 01 '14 at 10:25
Sorry, I misread your question. I found the answer and have edited my answer to suit. See http://stackoverflow.com/a/22840840/1442771 – Cobote Aug 01 '14 at 13:42

responsive design more than 2 column use order bootstrap3

1 Answers1