Скрыть загрузочные 3 столбца, когда последние 12

Question

У меня есть:

<div class="row">
    <div class="col-sm-3 col-md-2 col-lg-1">Col 1</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 2</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 3</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 4</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 5</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 6</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 7</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 8</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 9</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col A</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col B</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col C</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col D</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col E</div>
</div>

Я хочу видеть:

• 12 столбцов при экране 1200px < width - от 1 до 100 B
• 6столбцы, когда 992px < width < 1200px - от столбца 1 до столбца 6, и
• 4 столбца, когда 768px < width < 992px - от столбца 1 до столбца 4

и для всех остальных столбцов, которые должны бытьскрывается автоматически в зависимости от ширины экрана и настроек col- [sm | md | lg].Есть ли способ включить это только через css?

Answer 1

Вы можете немного изменить запрос css, используя ntn css

@media (min-width: 768px) and (max-width: 992px) {
  .row-filter .col-sm-3:nth-child(n + 5){
    display: none;
  }
  
}


@media (min-width: 992px) and (max-width: 1200px) {
  .row-filter .col-md-2:nth-child(n + 7){
    display: none;
  }
}

@media (min-width: 1200px) {
  .row-filter .col-lg-1:nth-child(n + 13){
    display: none;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="row row-filter">
    <div class="col-sm-3 col-md-2 col-lg-1">Col 1</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 2</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 3</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 4</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 5</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 6</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 7</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 8</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col 9</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col A</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col B</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col C</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col D</div>
    <div class="col-sm-3 col-md-2 col-lg-1">Col E</div>
</div>

Смотри код ручки https://codepen.io/anon/pen/rvPJOY