CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ajmajmajma
ajmajmajma

Reputation: 14216

moving columns responsivly with bootstrap

I have a section that reads left to right in bootstrap step up. What I am trying to do is get the right section to appear ontop of the left one in mobile view. I attempted using the push/pull methods but they seem to just push my content off the page.

Here is what I have

 <div class="row process-page wow animated fadeInRightBig animation-delay-2"><!-- Create row col-6 -->
            <div class="col-xs-push-12 col-md-6 col-sm-6">
                <h3 class="title margin-b-30">Title</h3>
                <p>Content</p>
            </div> <!-- end col-6 -->
            <div class="col-xs-pull-12 col-md-6 col-sm-6 clipB" >
                <h3 class="title margin-b-30 margin-l-30"></h3>
            </div>
        </div> <!-- end Row -->

So it looks fine in large/medium, however mobile I cannot seem to get them to switch places (top to bottom)

Here is what I Mean

Desktop :

  [A][B]

to mobile 

 [B]
 [A]

I thought the push/pull would do the trick if i pushed the top one 12 and pulled the bottom one 12, but all it does it push them both off the screen.

Upvotes: 1

Views: 66

Answers (2)

DaniP
DaniP

Reputation: 38252

You are using push and pull in the wrong way, you need to use that for the sm view. Try this:

  • First change the order in HTML and then use right the push and pull

    <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-push-6">
        <p>B</p>
    </div> 
    <div class="col-xs-12  col-sm-6 col-sm-pull-6" >
      <p>A</p>
    </div>
</div>

Check this Demo

Upvotes: 2

MSTannu
MSTannu

Reputation: 1033

Just push-12 means offsetting by that amount. Use pull-left and pull-right instead.

Upvotes: 1

Related Questions