CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
zeckdude
zeckdude

Reputation: 16163

Using Bootstrap, how can I put divs in different rows depending on the breakpoint?

I am using Bootstrap to create a grid that follows the following rule:

Medium and Large Devices (Above 992px) - 3 divs per row
Small Devices (Between 768px and 991px) - 2 divs per row
Extra Small Devices (Below 767px) - 1 div per row

In order to do that, I am using the following markup:

<div class="row">
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie. Here are some extra words to make this div taller.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
    <div class="resource-group col-sm-6 col-lg-4">
        <img src="http://placehold.it/100x100">
        <h5>Title here</h5>
        <p>Zur spitzen in handercloppen sauerkraut unter, nutske heinee corkin biergarten auf floppern relaxern hast underbite. Pukein frau keepin noodle achtung poopsie.</p>
    </div>
</div>

And the following CSS:

.resource-group {
    text-align: center;
    padding-bottom: 30px;
}

.resource-group img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

Here is the jsFiddle I created: https://jsfiddle.net/wmyL1ct4/1/

That works very well, until one of the divs has more content than the others such as here:

3 divs per row layout

My first thought is to wrap the first three divs in its own div.row and the next 3 divs in its own div.row for a total of 2 rows, but then when I switch to the medium size screens, I need it to be only two divs within each div.row for a total of 3 rows.

Using Bootstrap, how can I put divs in different rows depending on the breakpoint?

Upvotes: 2

Views: 191

Answers (3)

connexo
connexo

Reputation: 56754

This is how I would do it, using only CSS:

/* Extra Small Devices (Below 767px) - 1 div per row */
@media (max-width: 767px) {
    .row > div {
        float: none;
    }
}
/* Small Devices (Between 768px and 991px) - 2 divs per row */
@media (min-width: 768px) and (max-width: 991px) {
    .row > div:nth-of-type(2n+1) {
        clear: left;
    }
}
/* Medium and Large Devices (Above 992px) - 3 divs per row */
@media (min-width: 992px) {
    .row > div:nth-of-type(3n+1) {
        clear: left;
    }
}

Of course, I wouldn't create these media query rules for .row > div since this would affect the whole site. I'd add a custom class for this use case to <div class="row"> and change the media queries as follows:

@media (min-width: 992px) {
    .row.myCustomClass > div:nth-of-type(3n+1) {
        clear: left;
    }
}

http://jsfiddle.net/wmyL1ct4/7/

Upvotes: 1

isherwood
isherwood

Reputation: 61063

You'd apply reset markup per the docs. It does make for messier HTML, but it works. 

div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="clearfix visible-sm-block"></div>

<div class="resource-group col-sm-6 col-lg-4">
    ...
</div>

<div class="clearfix visible-md-block"></div>

Upvotes: 1

noto
noto

Reputation: 1

If I am understanding you correctly, when you are resizing to a smaller screen size your div's are breaking unevenly due to one item in the div being larger than the others?

Instead try < class="row row-eq-height"> on your first row. This sets the size of every item in your row to the largest element in that row.

Upvotes: -1

Related Questions