user568458 user568458 - 7 months ago 36
HTML Question

"Pull center" in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

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.

Answer

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.

Comments