альтернативные цвета фона для разных размеров col в bootstrap 4

Question

У меня есть следующая сетка.На больших рабочих столах (col-lg-4) мне нужен специальный фон для первых 3 делений, а затем снова для делений от 7 до 9 и так далее.Имея средний видовой экран (col-md-2), мне нужен другой фон для div 1 к 2, 5-6, 9-10 и так далее.

Я играл с 'nth' без какого-либо успеха.Кажется, это неверный путь.

<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

Согласно документации Bootstrap :

Маленький ≥ 576px
Средний ≥ 768px
Большой ≥ 992px

Тогда вы можетеустановите желаемый размер, когда вы хотите изменить цвета, и используйте правила @media, чтобы установить желаемый цвет для нужного 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>

ОБНОВЛЕНИЕ:

Если вы не можете установить класс в div, , затем попробуйте использовать селектор :nth-child(): .Тем не менее, вам нужно написать все желаемые числа div в таблице стилей CSS:

@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;
    }
}

Answer 2

@ StepUp Следуя твоему совету, я сделал это сейчас.Большое спасибо за вашу помощь

@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;
            }
        }
    }
}