CODEWITHSUNDEEP
twitter-bootstraptwitter
motorcb
motorcb

Reputation: 1051

Twitter bootstrap 3 - Column ordering

I have example on jsfidle. I want to rearrange the boxes as shown below:

Responsive layout

Thank you for your ideas

Upvotes: 0

Views: 176

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362360

Simply use the pull-right class on the content column.. no extra CSS required:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-xs-12">
            menu
        </div>
        <div class="col-sm-8 col-xs-12 pull-right">
            content
        </div>
        <div class="col-sm-4 col-xs-12">
            <div class="row">
                <div class="col-sm-12">
                      news
                 </div>
                <div class="col-sm-12">
                      photo
                 </div>
            </div>
        </div>
    </div>
</div>

Demo: http://bootply.com/i4o2KxdEjK

Upvotes: 1

BhagyashriK
BhagyashriK

Reputation: 525

In order to have achieve this structure you will need to pull your "content" div to right for sm and to left for xs.[bootstrap-pull-left-for-small-devices][1]

This link will help you to do so..

So, html will be

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-xs-12">Menu</div>
        <div class="col-sm-6 col-xs-12  pull-right-sm pull-xs-left">content</div>
        <div class="col-sm-4 col-xs-12">
            <div class="row">
                <div class="col-sm-12">News</div>
                <div class="col-sm-12">Photo</div>
            </div>
        </div>
    </div>
</div>

and CSS will be

 @media (max-width: 767px) {
     .pull-xs-left {
       float: left;
     }
 }
 @media (min-width: 768px) and (max-width: 991px) {
    .pull-sm-right {
      float: right;
    }
 }

Upvotes: 3

Related Questions