How to split a column in a responsive view using Bootstrap?

Question

I'm using Bootstrap v4 alpha4

Currently I have:

.row
  .col-xs-12.col-md-8
    div A
  .col-xs-12.col-md-4
    div B
    div C

For the xs layout, I'd like the div order to be:

Div B
Div A
Div C

I have no idea how to do this or how to even ask about it. I'm not a front-end dev so I don't know what things are called.

We can change the HTML to whatever we want. It does not have to stay like it is now.

Answer 1

Bootstrap does have column ordering classes, but in this case you can simply use the responsive float classes..

<div class="row">
    <div class="col-md-4 pull-md-right">
        b
    </div>
    <div class="col-md-8">
        a
    </div>
    <div class="col-md-4">
        c
    </div>
</div>

http://www.codeply.com/go/XL5zJELyLD