Holt Holt - 2 months ago 11
AngularJS Question

Bootstrap column pushing/pulling issue

I thought that I understand how

pushing
and
pulling
columns work...but I guess I was wrong. I have the following jsfiddle where I created a very simple grid. It looks like this while in
xs
:


Insured Name

Face AMount

Gender

Product


and then when I am in
sm
, it looks like thus:


Insured Name | Face Amount

Gender | Product


I'm all good thus far. However, when I get to
md
I need the Face Amount and Gender fields to switch places. As you can see (from the fiddle) I tried to
push
the FaceAmount field 6 columns (I expected that this field would then be pushed down into the next row) and then
pull
the Gender field 6 columns (thus pulling it up a row).

However, if you pull the fiddle out to the
md
viewpoint...the FaceAmount column is pushed way off to the right (instead of wrapping down) and the Gender field is pulled way to the left to the point where you can't even see it anymore.

Is there something that I am missing? I would have expected that since I am pushing the FaceAmount field passed the 12 column mark that it would wrap down. Similarly, I expected the Gender field to be pulled up to the previous row.

Answer

I think you are right by saying:

I am pushing the FaceAmount field passed the 12 column mark

Also, you seem to understand to use push and pull. The problem in the jsfiddle is that you trying to rearrange between two different rows. For example, you can push Insured Name and pull Face Amount using:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> 1 </div>
        </div>
        <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
            <div class="well"> 3 </div>
        </div>
        <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
            <div class="well"> 2 </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-md-4">
            <div class="well"> 4 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 5 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 6 </div>
        </div>
    </div>
 </div>

Result:

enter image description here

But while doing between different rows it doesn't work that way. From this article:

As pushing and pulling works by setting a left or right property it will never wrap to another row as you noted.

Here is a very good article to understand how push and pull works.