CODEWITHSUNDEEP
htmltwitter-bootstrap
sebastian
sebastian

Reputation: 55

how make a row with 3 elements and show 2 in mobile view Bootstrap

I need show 9 elements(div) in rows of 3, but that row show only 2 elements on mobile view, how i make this?

| elem_0 | elem_1 | elem_2 |   <--- on desktop
| elem_3 | elem_4 | elem_5 |

| elem_0 | elem_1 |
| elem_2 | elem_3 |     <--- on mobile view
| elem_4 | elem_5 |

Upvotes: 1

Views: 2463

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38817

To achieve this use multiple col-*-* classes targeting both larger screen sizes such as md and lg then sm and xs at smaller screen sizes. At the larger screen sizes you'll target col-*-4 (1/3) and at smaller screen sizes you'll target col-*-6 (1/2). If given Bootstrap row ends up have col-*-* totaling more than 12, they will overflow into the next visible row:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-6">0</div>
        <div class="col-md-4 col-sm-6 col-xs-6">1</div>
        <div class="col-md-4 col-sm-6 col-xs-6">2</div>
        <div class="col-md-4 col-sm-6 col-xs-6">3</div>
        <div class="col-md-4 col-sm-6 col-xs-6">4</div>
        <div class="col-md-4 col-sm-6 col-xs-6">5</div>
    </div>
</div>

Example:

http://www.bootply.com/SSuDcf7RSh

You may need to adjust the col-sm-6 on each <div> element to suit your breakpoint needs. Not sure what px screen width you are considering mobile.

Upvotes: 1

Related Questions