19

I am working with Twitter Bootstrap v3 and want to reorder elements responsively, using column ordering and offsetting.

This is how I would like to use my elements. At -xs or -sm breakpoints, with the containing div stacked 4 to a row:

enter image description here

At -md or -lg breakpoints, with the containing div stacked 2 to a row:

enter image description here

This is the current code - I know how to set the classes on the containing div, but not on A, B and C: 

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

I can't figure out how to get A, B and C in the right order with Bootstrap 3's column ordering and offsetting. Is it actually possible?

This is as far as I've got using JSFiddle: http://jsfiddle.net/3vYgR/

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Richard
  • 62,943
  • 126
  • 334
  • 542
  • What do you mean by “stacked 4/2 to a row”? Do you mean that the first version is 4 units high and the second is 2 units high? Or do you mean that the first version can have 4 of those a-b-c groups in a horizontal line, and the second can have 2? – Rory O'Kane Aug 29 '13 at 15:55

4 Answers4

23

Users of Bootstrap 4 or Bootstrap 5 will want to see this question: Bootstrap change order of columns

Bootstrap 3 (original answer)

I think you want to look at the push and pull classes...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

Demo: http://bootply.com/77853

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 4
    That's exactly what I wanted, thank you! For anyone reading here is the link to the push/pull docs: http://getbootstrap.com/css/#grid-column-ordering though I still don't fully understand exactly what push and pull do... – Richard Aug 30 '13 at 11:24
  • 1
    You only need new grid class when something changes like going from 12 columns to 6. There's no need for col-sm-* or col-lg-* classes because they inherit the xs and md respectively. – Dylan Valade Dec 21 '13 at 16:09
  • Don't forget you might also need to use "clearfix" if your elements start appearing in unexpected positions. – Mark Cooper Feb 04 '15 at 08:37
  • This example also gives a problem with vertical alignment of [C] as listed in my answer. – Mark Cooper Feb 09 '15 at 09:11
1

Any reason to not use more traditional methods on this, ie. floating B left and the other elements to the right?

Like if you added this to current CSS in your jsfiddle:

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

See http://jsfiddle.net/E6BFk/

I'm not sure that Bootstrap's column ordering could accomplish the stacking effect, perhaps only the re-ordering... Though the documentation is pretty slim on that feature.

rsigg
  • 76
  • 3
0

I tried the push/pull as shown in the answer by Skelly but C ends up in a new row once heights are applied: http://www.bootply.com/Q3djHYawgb#

If B can be shown first when shown in small size, then I think it makes more sense to create a row inside the right hand side column to contain A and C:

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

See http://jsfiddle.net/hoodoo99/L2BE9/

Dave
  • 371
  • 3
  • 3
0

The answer provided by @skelly is great starting point, but does cause some vertical alignment issues. Imagine A is a tall div, then C is vertically aligned below A.:

[A] [B]
[ ]
    [C]

Also, If you want to take this a step further you may also need to consider using clearfix blocks. For example;

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

Without clearfix md or lg might end up as:

[A] [B]
    [C] [D]

This is particularly important if you want more than 2 elements in the final "column", or the heights of the elements start throwing other elements out of alignment.

With the clearfix md or lg would be:

[A] [B]
    [C]
    [D]

Example fiddle: http://jsfiddle.net/L5174o8d/

Mark Cooper
  • 6,738
  • 5
  • 54
  • 92
  • Is there any way to solve the vertical align problem? what i want is the opposite of this but I have the same align problem. ex: https://jsfiddle.net/bqop535n/ – Wei Feb 12 '15 at 05:50
  • If I've understood you correctly then you should remove the clearfix and push/pulls, for example: https://jsfiddle.net/qkaL02z8/ – Mark Cooper Feb 12 '15 at 12:36