CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designgridcol
tx291
tx291

Reputation: 1331

Change order of cols with push and pull Bootstrap

I just discovered the "push" and "pull" classes in Bootstrap, but am having a lot of trouble implementing them the way I'd like. On XS screens, my content appears as follows, which is correct:

|A||B||C|

But on SM screens, I need it to be:

|B|
|C|
|A|

My HTML is below. I tried adding "col-sm-push-10" to the div that contains my button, but that just pushed it to the right within it's own div. I need to actually MOVE this div down. Any help would be much appreciated!!

<div class="container-fluid">
    <div class="col-sm-4">
       <ul class="prod-group">
         <div class="col-xs-2 col-sm-10">
            <li><button type="button" class="btn">A</button></li>
          </div>
          <div class="col-xs-6 col-sm-10">
            <li>B</li>
           </div>
           <div class="col-xs-4 col-sm-10">
              <li>Cr</li>
           </div>
        </ul>    
     </div>

Upvotes: 1

Views: 451

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

Usually you'd want elements to stack vertically on xs screens, and remain horizontally on larger (sm) screens, so this is an unusual case where you actually want the opposite. Create the stacking sm layout first, then adjust for xs using push-pull.. A-B-C on large. B-C-A on mobile.

<div class="container-fluid">
    <div class="row">
    <div class="col-sm-4">
        <ul class="row prod-group">
            <li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
                B
            </li>
            <li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
                C
            </li>
            <li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
                A
            </li>
        </ul>
    </div>
    </div>
</div>

Demo http://www.codeply.com/go/yMxh8sGwMZ

Also, don't forget to keep your columns inside a row for proper padding.

Upvotes: 1

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

You should write your elements in order that you want to see on -sm-. Then adjust their position at -xs-:

<div class="row">
    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        B
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-push-4">
        C
    </div>

    <div class="col-sm-12 col-xs-4 col-xs-pull-8">
        A
    </div>     
</div>

By the way, you should use li only as direct child of ul as well as not using other elements such as div directly inside ul, because it is not valid.

Upvotes: 1

Related Questions