Twitter Bootstrap Question posted in

Twitter bootstrap – Keep one column at upper right of grid for all breakpoints

I’ve been using the grid system in Twitter Bootstrap on several projects – but can’t seem to crack this nut.

I want to place a blue promotion cell in the upper right corner of the grid like this:

enter image description here

enter image description here

enter image description here

enter image description here

Sample code

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 big">Promotion</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">12</div>                   
</div>

Playground: http://jsfiddle.net/3fr3rsL3/

Any help is appreciate

Tags:

2

Answers


  1. 0

    Here it is using Bootstrap’s push and pull ordering classes:

    Demo

    …

    <div class="col-xs-12 col-sm-4 col-md-3 col-md-push-3 col-lg-2 col-lg-push-6 big">
    <div>3</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-md-pull-3 col-lg-2 col-lg-pull-2">
    <div>4</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
    <div>5</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-lg-pull-2">
    <div>6</div>
</div>

    …

    Forcing float on the column at all sizes resolves the issue of overlap for mobile:

    .big {
    float: left;
}
    Login or Signup to reply.
  2. 0

    It seems to me the simplest answer would be to place it third in order in the row. This will keep it ordered correctly on the narrowest viewports. Next, use .col-xs-12 just on the .promotion <div> to achieve the full width on narrow viewports. Finally, use .pull-right to correct the ordering on wider viewports. Your original code is almost there, and with the example you’ve given I don’t see a need to complicate it much.

    Check this fork of your fiddle for what I mean: https://jsfiddle.net/rrt22y5p/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search