I'm **not** asking for simple center aligning of columns in bootstrap. That's easy and [has been covered already](https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3), 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.