How to display multiple columns (2) as one using Bootstrap when shrinking screen (responsive)?

Question

I have a design with twelve columns. On larger screens I want to display

col-md4 + col-md2 + col-md2 + col-md 2 + col-md2.

When using smaller screens I want to display

• col-md4 in one row,
• two col-md2s in the second row
• and another two col-md2s in the last row.

How do I do this using bootstrap?

I have uploaded an image of how I picture this, as the description might be confusing. :) https://i.stack.imgur.com/S2FRs.png

Answer 1

As Bootstrap's grid system is mobile-first, you should look at it the other way, and analyse it from the small size upwards. What I would do is:

<div class="col-md-4">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>
<div class="col-xs-6 col-md-2">
    <p>some text</p>
</div>

Hope this helps.