Bootstrap push/pull column issue - html

Question

I have 4 columns like this
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>
Normally it looks like this:
[3][1][4][4]
When it's in smaller viewport, I want it to show like this:
[4]
[4]
[3]
[1]
I have tried
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-8"> col3</div>
<div class="col-md-1 col-md-push-8"> col1</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
<div class="col-md-4 col-md-pull-4"> col4</div>
</div>
</div>
It shows:
In large viewport:
[4][4][3][1]
In viewport that those columns collapse:
[3][1][4][4]
But it seems like what I did is completely reversed...
A created a codepen snippet http://codepen.io/ngp130895/pen/Kzxdpj
How can I achieve this?

Answer 1

you may get the solution in this link

Answer 2

I found a workaround for this. This looks kinda stupid but it works.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-4 col-md-push-4"> col4</div>
<div class="col-md-3 col-md-pull-8"> col3</div>
<div class="col-md-1 col-md-pull-8"> col1</div>
</div>
</div>
Edit: I found that this actually the correct way. Mobile view should be written by default and larger viewport is modified by pushing and pulling the columns.

Answer 3

Div is an element block and every new div go to the head of the line.
For fix this problem have two way:
Use tag
Use a code CSS for do became tag inline
For the first way you must only change tag <div> with <span.
For the last way you can use it:
div.container > div.row > div {
display: inline;
}
<div class="container">
<div class="row">
<div class="col-md-3"> col3</div>
<div class="col-md-1"> col1</div>
<div class="col-md-4"> col4</div>
<div class="col-md-4"> col4</div>
</div>
</div>