CODEWITHSUNDEEP
twitter-bootstrapresponsive-designtwitter-bootstrap-3
Seth
Seth

Reputation: 123

Column Ordering in Bootstrap3 - Push and Pull

Using bootstrap 3 I have some questions about push/pull with column ordering. Here's what I am after:

enter image description here

I have this code:

<div class="col-xs-10 col-sm-3 col-md-2">
        Column 1
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 2
    </div>
    <div class="col-xs-10 col-sm-3 col-md-2">
        Column 3
    </div>
    <div class="col-xs-10 col-sm-9 col-md-4">
        Purple box.
    </div>
    <div class="col-xs-2 col-sm-3 col-md-2">
        Orange box.
    </div>

If I add the pull modifier class to the purple box for sm/xs and push to the three columns, it produces strange results. Can someone tell me what I'm missing?

Upvotes: 1

Views: 6457

Answers (3)

David C
David C

Reputation: 3810

On some browsers dom order of the divs can cause weird effects. Try writing the purple box earlier in the dom than the rest of its siblings.

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

@kalhartt will be right, see: http://bootply.com/91310. You should define some grid classes for a 10 column grid, to solve this 2-2-2-4-2.

Additional CSS:

@media (min-width: 992px) {
.col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10
{
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}   


  .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9 {
    float: left;
  }
  .col-md10-10 {
    width: 100%;
  }
  .col-md10-9 {
    width: 90%;
  }
  .col-md10-8 {
    width: 80%;
  }
  .col-md10-7 {
    width: 70%;
  }
  .col-md10-6 {
    width: 60%;
  }
  .col-md10-5 {
    width: 50%;
  }
  .col-md10-4 {
    width: 40%;
  }
  .col-md10-3 {
    width: 30%;
  }
  .col-md10-2 {
    width: 20%;
  }
  .col-md10-1 {
    width: 10%;
  }
  .col-md10-pull-10 {
    right: 100%;
  }
  .col-md10-pull-9 {
    right: 90%;
  }
  .col-md10-pull-8 {
    right: 80%;
  }
  .col-md10-pull-7 {
    right: 70%;
  }
  .col-md10-pull-6 {
    right: 60%;
  }
  .col-md10-pull-5 {
    right: 50%;
  }
  .col-md10-pull-4 {
    right: 40%;
  }
  .col-md10-pull-3 {
    right: 30%;
  }
  .col-md10-pull-2 {
    right: 20%;
  }
  .col-md10-pull-1 {
    right: 10%;
  }
  .col-md10-push-10 {
    left: 100%;
  }
  .col-md10-push-9 {
    left: 90%;
  }
  .col-md10-push-8 {
    left: 80%;
  }
  .col-md10-push-7 {
    left: 70%;
  }
  .col-md10-push-6 {
    left: 60%;
  }
  .col-md10-push-5 {
    left: 50%;
  }
  .col-md10-push-4 {
    left: 40%;
  }
  .col-md10-push-3 {
    left: 30%;
  }
  .col-md10-push-2 {
    left: 20%;
  }
  .col-md10-push-1 {
    left: 10%;
  }
  .col-md10-offset-10 {
    margin-left: 100%;
  }
  .col-md10-offset-9 {
    margin-left: 90%;
  }
  .col-md10-offset-8 {
    margin-left: 80%;
  }
  .col-md10-offset-7 {
    margin-left: 70%;
  }
  .col-md10-offset-6 {
    margin-left: 60%;
  }
  .col-md10-offset-5 {
    margin-left: 50%;
  }
  .col-md10-offset-4 {
    margin-left: 40%;
  }
  .col-md10-offset-3 {
    margin-left: 30%;
  }
  .col-md10-offset-2 {
    margin-left: 20%;
  }
  .col-md10-offset-1 {
    margin-left: 10%;
  }
}

html:

<div class="container">
    <div class="row">
    <div class="col-md-10 col-sm-9 col-xs-10">
        <div class="row">
            <div class="col-md10-4 col-md10-push-6 col-xs-12" style="height:50px;background-color:#CA0088"></div>
            <div class="col-md10-6 col-md10-pull-4 col-xs-12">

                <div class="row">
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#A7A8AA"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#D0D1D3"></div>
                    <div class="col-sm-4 col-xs-12" style="height:50px;background-color:#E7E7E9"></div>     
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-2" style="height:50px;background-color:#E0922E"></div>
    </div>
</div>

Note you can't construct the additional CSS with Less only at the moment.

The column names for the first part .col-md10-1, .col-md10-2, .col-md10-3, .col-md10-4, .col-md10-5, .col-md10-6, .col-md10-7, .col-md10-8, .col-md10-9, .col-md10-10 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } are hard code in mixins.less (see: https://github.com/twbs/bootstrap/issues/11321)

The second part can be construct by:

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

@grid-columns: 10;
@media (min-width: @screen-md-min) {
  .make-grid-columns-float(md10);
  .make-grid(@grid-columns, md10, width);
  .make-grid(@grid-columns, md10, pull);
  .make-grid(@grid-columns, md10, push);
  .make-grid(@grid-columns, md10, offset);
}

Cause this set @grid-columns used in make-grid() and make-grid-columns-float you can't compile both grids once. See also: https://github.com/twbs/bootstrap/issues/11322

Upvotes: 4

kalhartt
kalhartt

Reputation: 4129

My guess is you are getting strange results because your div's aren't properly nested. The general rule of thumb is any group should have all its children either stacked or side-by-side and not mixed. Given that, try the following:

<div class="col-xs-10 col-sm-9 col-md-10">
    <div class="well col-sm-12 col-md-7 col-md-push-5">
        Purple box.
    </div>
    <div class="col-sm-12 col-md-5 col-md-pull-7">
        <div class="well col-sm-4">
            Column 1
        </div>
        <div class="well col-sm-4">
            Column 2
        </div>
        <div class="well col-sm-4">
            Column 3
        </div>
    </div>
</div>
<div class="well col-xs-2 col-sm-3 col-md-2">
    Orange box.
</div>

Here's the fiddle, the well class is just to visually show the boundary. The only problem is getting the 2-2-2-4-2 width in the first case, since the sub-columns must add to 12. Instead I used ((4-4-4 of 5)-7 of 10)-2. If you really need the 2-2-2-4-2, then you'll probably have to make your own css classes.

Upvotes: 2

Related Questions