Bootstrap css column push pull

Question

I'm having trouble with my column ordering using bootstrap 3.3.2. I'm not even sure this this is possible!! It's probably best if I show you...

My code is currently:

<div class="row">
    <div class="col-md-3 col-md-push-6">A</div>
    <div class="col-md-6 col-md-pull-3">B</div>
    <div class="col-md-3">C</div>
</div>

It does re-order them as B - A - C for desktop, but I am not sure how to get element C to drop down below A. It's the order I want for mobile as I know bootstrap 3 is mobile-first...

any ideas?

Answer 1

One way to approach this is using the pull-right classes. B-A-C large, A-B-C mobile...

<div class="container">
      <div class="col-md-3 pull-right">
          A
      </div>
      <div class="col-md-9">
          B         
      </div>
      <div class="col-md-3 pull-right">
          C
      </div>
</div>

Demo: http://bootply.com/nMaeg47uFt

---

Update for future reader using Bootstrap 4: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4