1

This is similar to this question, but I want several columns stacked in a certain order:

<div class="container">
    <div class="col-sm-4 col-sm-push-8">B</div>
    <div class="col-sm-8 col-sm-pull-4">A</div>
    <div class="col-sm-4 col-sm-push-8">C</div>
</div>

This will display the following:

mobile screens

B
--
A
--
C

desktop screen

A | B
--|
C |

But this is what I want:

mobile screens

B
--
A
--
C

desktop screen

A | B
  | --
  | C

There is a caveat: All columns have different heights, so the stacking needs to be very tight (very little empty space underneath each other). This means I can't put A and B on their own row since the largest column will push everything down, creating a bunch of empty space in between the stacks.

How can this be done? Ideally a solution would be flexible enough to also allow stacking more columns underneath C or A.

rublex
  • 1,893
  • 5
  • 27
  • 45

1 Answers1

0

I believe what you are looking for is an offset.

You can set your columns up in that way, using something like:

<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-6">C</div>
</div>

The offset pushes it over to be on the second half of your grid, but will stack them appropriately on mobile.

Quintile
  • 335
  • 2
  • 6
  • 1
    This won't work because if `A` has a very large height, `C` will be pushed down since it's on its own row. The result will be a huge gap between `B` and `C`. – rublex May 19 '15 at 00:50