1

i need to reorder my columns on small devices. i'm trying to use col-sm-push and col-sm-pull but this not work and i don't understand why.

<div class="row no-margin white max-width">
  <div class="col-xs-12 col-sm-12 col-sm-push-12 col-md-6 no-padding">
    <div class="image">
      A
    </div>
  </div>
  <div class="col-xs-12  col-sm-12 col-sm-pull-12 col-md-6 no-padding">
    <div class="item">
      <div class="title">
      </div>
      <div class="info">
        B
      </div>
    </div>
  </div>
</div>

What is the problem?

Thank you

user3242861
  • 1,839
  • 12
  • 48
  • 93
  • Possible duplicate of [How do I change Bootstrap 3 column order on mobile layout?](http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout) – vanburen Jan 19 '17 at 17:03
  • Possible duplicate of [Swap the positions of grids which are side by side to top and bottom using bootstrap](http://stackoverflow.com/questions/41096317/swap-the-positions-of-grids-which-are-side-by-side-to-top-and-bottom-using-boots) – Banzay Jan 19 '17 at 18:11

1 Answers1

1

push-pull on md screen sizes. push-pull works when they are side by side, which is not the case when screen is xs.

You have to set the order that you want on you xs screen and for md size screen use push-pull

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-margin white max-width">
  
  <div class="col-xs-12 col-sm-12 col-md-6 no-padding col-md-push-6">
    <div class="image">
      B
    </div>
  </div>
  <div class="col-xs-12  col-sm-12 col-md-6 no-padding col-md-pull-6">
    <div class="item">
      <div class="title">
      </div>
      <div class="info">
        A
      </div>
    </div>
  </div>
</div>
ab29007
  • 7,611
  • 2
  • 17
  • 43