2

I'm not asking for simple center aligning of columns in bootstrap. That's easy and has been covered already, those solutions don't apply to what I'm trying to do here.

What I want, is a layout that is five column on wide devices, 2 - 3 - 2 - 3 - 2, collapsing down to have the three 2 columns 4 - 4 - 4, then the two 3 columns 6 - 6.

Something like this:

  <div class="row">
    <div class="col-xs-4 col-md-2 pull-left">
    A
    </div>

    <div class="col-xs-4 col-md-2 pull-center">
    <!-- of course, pull-center doesn't exist, it's here to illustrate intention -->
    B
    </div>

    <div class="col-xs-4 col-md-2 pull-right">
    C
    </div>

    <div class="col-xs-6 col-md-3"> 
    D
    </div>

    <div class="col-xs-6 col-md-3"> 
    E
    </div>
  </div>

Which, if pull-center existed and float: middle existed, would look like this on a wide device:

 A- _D_ B- _E_ C-

...and like this on a narrow device:

 -A-- -B-- -C--
 __D___ __E___

...but, because there's no such thing as pull-center or float: middle;, currently looks like this:

 A- B- _D_ _E_ C-

How can I get my B column to float between the two columns below it in the HTML? I've tried adding various pull- classes and float CSS to the D and E columns but can't find anything that helps.

Community
  • 1
  • 1
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125

2 Answers2

4

I think here is you want: 

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-4">
    D
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-2">
    E
    </div>
</div>

I Use Bootstrap column ordering .

It can easily change the order of responsive columns.

Hope it helps.

For explanation :

(Original order)

enter image description here

(New order)

enter image description here

push-* (move right * steps)

pull-* (move left * steps)

B => from (3) to (6) => push 3 steps

C => from (5) to (11) => push 6 steps

D => from (7) to (3) => pull 4 steps

E => from (10) to (8) => pull 2 steps

Claire Lee
  • 301
  • 1
  • 3
2

Instead of using float, you can make use of .col-*-push-* and .col-*-pull-* Bootstrap modifier classes to change the position of the elements.

You will end up with something like the following:

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>

    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-4"> 
    D
    </div>

    <div class="col-xs-6 col-md-3 col-md-pull-2"> 
    E
    </div>
  </div>

See example.

KrisD
  • 468
  • 4
  • 9