alternate background colours for different col sizes in bootstrap 4

Question

I have the following grid. On large desktops (col-lg-4) I need a special background for the first 3 divs and then again for div 7 to 9 and so on. Having a medium viewport (col-md-2) I need a different background for div 1 to 2, 5-6, 9-10 and so on.

I played around with'nth' without any success. That seems to be the wrong way.

<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6/div>
        <div7</div>
        <div>8</div>
        [...]
    </div>
</div>

Answer 1

@StepUp Following your advice I've done it this way now. Thanks a lot for your help

@include media-breakpoint-down(sm) {
    .row.col-ordered {
        > div.col-sm-12 {
            padding: .5rem !important;
            &:nth-child(1),
            &:nth-child(3),
            &:nth-child(5),
            &:nth-child(7),
            &:nth-child(9),
            &:nth-child(11) {
                background-color: $gray-light;
            }
        }
    }
}

@include media-breakpoint-between(md,lg) {
    .row.col-ordered {
        > div.col-sm-12 {
            padding: .5rem !important;
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(5),
            &:nth-child(6),
            &:nth-child(9),
            &:nth-child(10) {
                background-color: $gray-light;
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    .row.col-ordered {
        > div.col-sm-12.col-md-6 {
            padding: .5rem !important;
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(7),
            &:nth-child(8),
            &:nth-child(9) {
                background-color: $gray-light;
            }
            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(6),
            &:nth-child(10) {
                background-color: white;
            }
        }
    }
}

Answer 2

According to Bootstrap documentation:

Small ≥ 576px
Medium ≥ 768px
Large ≥ 992px

Then you can set your desired size when you want to change colors and use @media rules to set desired color for the desired div's:

CSS:

@media screen and (min-width: 0px) and (max-width: 576px) {
    .first-two-divs { background-color: red; }
    .third-div { background-color: orange; }
    .five-six-divs  { background-color: green; }
}
@media screen and (min-width: 577px) and (max-width: 768x) {
    .first-two-divs { background-color: green; }
    .third-div { background-color: yellow; }
    .five-six-divs  { background-color: red; }
}
@media screen and (min-width: 769px) {
    .first-two-divs { background-color: blue; }
    .third-div { background-color: red; }
    .five-six-divs  { background-color: yellow; }
}

HTML:

<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">
        <div class="first-two-divs">1</div>
        <div class="first-two-divs">2</div>
        <div class="third-div">3</div>
        <div>4</div>
        <div class="five-six-divs">5</div>
        <div class="five-six-divs">6/div>    
    </div>
</div>

UPDATE:

If you cannot set class to div, then try to use :nth-child() selector:. However, you need to write all your desired numbers of div in CSS stylesheet:

@media screen and (min-width: 0px) and (max-width: 400px) {
    .row > div > div:nth-child(2) {
         background-color: red;
    }
    .row > div > div:nth-child(3) {
        background-color: green;
    }
    .row > div > div:nth-child(4) {
        background-color: pink;
    }
    .row > div > div:nth-child(5) {
        background-color: orange;
    }
}
@media screen and (min-width: 401px) and (max-width: 599px) {
    .row > div > div:nth-child(2) {
        background-color: orange;
    }
    .row > div > div:nth-child(3) {
        background-color: red;
    }
    .row > div > div:nth-child(4) {
        background-color: green;
    }
    .row > div > div:nth-child(5) {
        background-color: pink;
    }
}
@media screen and (min-width: 600px) {
    .row > div > div:nth-child(2) {
        background-color: pink;
    }
    .row > div > div:nth-child(3) {
        background-color: orange;
    }
    .row > div > div:nth-child(4) {
        background-color: red;
    }
    .row > div > div:nth-child(5) {
        background-color: green;
    }
}