You are a bit unclear.
The schemes that you provided in your question represent the responsiveness of Bootstrap.
For example, on tablet the rows will be split to provide better user experience in terms of responsiveness, or in simple words - no horizontal scrolling (as long as it depends on Bootstrap, and you don't make any additions that affect this concept).
If the screen is smaller, displaying the items normally will result in horizontal scrolling and this is what we are trying to avoid, so this is why it occurs.
Pulling and pushing
Pulling and pushing are ways to manipulate the grid, and push or pull (literally) the columns as if there were actual columns in there, while there are none.
I would recommend reading this question, the answer provided there is great.
Edit
For your question, you should split the columns into rows. So for example:
<div class="container">
<div class="row">
<div class="col-md-4">Col 1</div>
<div class="col-md-4">Col 2</div>
<div class="col-md-4">Col 3</div>
</div>
<div class="row">
<div class="col-md-4">Col 4</div>
<div class="col-md-4">Col 5</div>
<div class="col-md-4">Col 6</div>
</div>
</div>
Will show up like this:
[Col 1] [Col 2] [Col 3]
[Col 4] [Col 5] [Col 6]
And on mobile, like this:
[Col 1]
[Col 2]
[Col 3]
[Col 4]
[Col 5]
[Col 6]
