CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
aressidi
aressidi

Reputation: 680

Switching the order of columns as rows in responsive bootstrap

I'm wondering if what I am trying to achieve is possible with Bootstrap. I am using Bootstrap 3's push / pull to arrange columns in a row. I'm happy with how things otherwise render in the mobile view with one exception. What I'd like to have happen is switch the order of two columns which render as rows on a mobile device - Author and Title.

See attached

http://bootply.com/109874

In the mobile version, I'd like position of Author and Title to change. I would like Title to appear on top of Author only in the mobile view. I thought this could be achieved through push / pull. How can I make this happen?

Upvotes: 0

Views: 3250

Answers (1)

Christina
Christina

Reputation: 34652

You can't change the stacked source order with push and pull. I think a cleaner solution is to use the responsive utilities:

http://jsbin.com/aXiHOFah/1/edit

<div class="container">
 <div class="row">
   
  <div class="col-sm-8 col-sm-push-4">
   <p class="visible-xs">Title</p>
   <p>Author</p>
   <p class="hidden-xs">Title</p>
    <p><img src="//placehold.it/460x340" class="visible-xs img-responsive"></p>
   <p>Description</p>
  </div>
  <!--./col-sm-8 col-sm-push-4-->
  
  <div class="col-sm-4 col-sm-pull-8 hidden-xs">
   <img src="//placehold.it/460x340" class="img-responsive">
  </div>
  <!--./col-sm-4 col-sm-pull-8-->
  
 </div>
 <!--./row -->
</div>

Upvotes: 0

Related Questions