Bootstrap 4 стиль только левая колонка

Question

У меня есть строка, динамически заполненная элементами X, содержащимися в классе col-3 (в зависимости от фактического размера экрана).

Можно ли легко стилизовать только столбец, который будет отображаться слева во время экрана изменение размера?

Как это: lg экран:

md экран:

.box{
  border: 1px solid blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 1</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 2</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 3</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 4</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 5</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 6</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 7</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 8</div>
    </div>
    <div class="col-6 col-sm-3 col-md-2 col-lg-1">
        <div class="box">Box 9</div>
    </div>
  </div>
</div>

Answer 1

Вы можете достичь результата с помощью селектора :nth-of-type(n) с некоторыми медиа-запросами. Например,

// lg
@media screen and (min-width: 992px) { 
    div.yourClass:nth-of-type(4n-3){
        color:green;
        // or whatever css you want
    }
}

// md
@media screen and (min-width: 768px) and (max-width: 991px) { 
    div.yourClass:nth-of-type(3n-2){
        color:green;
        // or whatever css you want
    }
}

Образец (go полная страница)

.rectangle {
  border: 4px solid black;
  height: 20px;
}

@media screen and (min-width: 992px) {
  div.rectangle:nth-of-type(4n-3) {
    border-color: green;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  div.rectangle:nth-of-type(3n-2) {
    border-color: green;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
    <div class="col-lg-3 col-md-4 rectangle"></div>
  </div>
</div>

Скрипка

Недостаток

Недостатком этого является то, что вам необходимо точно знать, сколько элементов будет присутствовать в одной строке для каждого размера экрана, а для каждого

необходимо указать пользовательское значение css.