2

I am trying to reorder the element in xs size, using push and pull feature in bootstrap. It seems to be not working for me. Please help out.

<div class="row">
  <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 col-xs-push-12">
    A
  </div>
  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-12  col-xs-pull-12">
    B
  </div>
</div>

Expected Result on all other resolution: WORKING 

------------
| A  | B   |
------------

Expected Result in mobile devices: NOT WORKING

-------
|  B  |
-------
|  A  |
-------

But actually its coming with scrollbar and all. I am new to bootstrap framework, let me know where I went wrong.

Thanks

Dipak
  • 6,532
  • 8
  • 63
  • 87
  • Refer these answers http://stackoverflow.com/questions/24733039/how-to-set-push-pull-columns-for-only-smaller-screen-sizes-in-bootstrap and http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes – Suresh Ponnukalai Dec 09 '15 at 07:30
  • @SureshPonnukalai : I have looked into that, but when its coming to 2 column scenario with col-xs size its not working. – Dipak Dec 09 '15 at 07:36
  • 1
    Remember when using Bootstrap, always think mobile first. So make it work at xs first, then scale up. – DavidG Dec 09 '15 at 07:50

2 Answers2

3

As far as I know you cannot use Column Reordering with a 12 Column span. It looks like what you want to do can be done with col-sm-* though.

See working Snippet.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-7 col-sm-push-5">
      <div class="alert alert-danger">B</div>
    </div>
    <div class="col-sm-5 col-sm-pull-7">
      <div class="alert alert-info">A</div>
    </div>
  </div>
</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41
  • Thanks, but when col class is like this : `col-xs-12 col-xs-push-12` and `col-xs-12 col-xs-pull-12` , its not working. I have problem xs screen sizes. – Dipak Dec 09 '15 at 07:55
  • That's what I'm saying, you cannot use Column Reordering with `col-*-12`, it won't work. And the above example gives the same result; your columns reorder @ under 768px. – vanburen Dec 09 '15 at 07:57
  • Exactly, glad I could help. – vanburen Dec 09 '15 at 08:01
0

Try to change your order as per xs screen then use push and pull to achieve it in other size screen. 

 <div class="row">
    <div class="col-sm-6 col-sm-push-6 col-xs-12">B</div>
    <div class="col-sm-6 col-sm-pull-6 col-xs-12">A</div>
 </div>
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54