title: "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?
body: <p>I'm <strong>not</strong> asking for simple center aligning of columns in bootstrap. That's easy and <a href="https://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3">has been covered already</a>, those solutions don't apply to what I'm trying to do here. </p>
  
  <hr>
  
  <p>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.</p>
  
  <p>Something like this:</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;div class="col-xs-4 col-md-2 pull-left"&gt;
      A
      &lt;/div&gt;
  
      &lt;div class="col-xs-4 col-md-2 pull-center"&gt;
      &lt;!-- of course, pull-center doesn't exist, it's here to illustrate intention --&gt;
      B
      &lt;/div&gt;
  
      &lt;div class="col-xs-4 col-md-2 pull-right"&gt;
      C
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-md-3"&gt; 
      D
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-md-3"&gt; 
      E
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Which, if <code>pull-center</code> existed and <code>float: middle</code> existed, would look like this on a wide device:</p>
  
  <pre><code> A- _D_ B- _E_ C-
  </code></pre>
  
  <p>...and like this on a narrow device:</p>
  
  <pre><code> -A-- -B-- -C--
   __D___ __E___ 
  </code></pre>
  
  <p>...but, because there's no such thing as <code>pull-center</code> or <code>float: middle;</code>, currently looks like this:</p>
  
  <pre><code> A- B- _D_ _E_ C-
  </code></pre>
  
  <p>How can I get my <code>B</code> column to float between the two columns below it in the HTML? I've tried adding various <code>pull-</code> classes and <code>float</code> CSS to the D and E columns but can't find anything that helps.</p>