Holt Holt - 21 days ago 8x
AngularJS Question

Bootstrap column pushing/pulling issue

I thought that I understand how

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

Insured Name

Face AMount



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

Insured Name | Face Amount

Gender | Product

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

However, if you pull the fiddle out to the
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.


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 class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
            <div class="well"> 3 </div>
        <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
            <div class="well"> 2 </div>

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

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


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.