Bootstrap 3, Media Query Clear: слева

Question

Я использую бутстрап и у меня есть div с col-xs-12, col-sm-6, col-md-4.

Todo:

• Мне нужно добавить клир на каждый 1 предмет, для col-xs-12,
  добавить клир на каждые 2пункты для col-sm-6,
  и очистить каждый третий элемент для col-md-4.

Кажется, что мой код ниже очищается на каждом 1 элементе.

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        .video-item:nth-child(1n+1){
            clear:left
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .video-item:nth-child(2n+1){
            clear:left
        }
    }

   /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .video-item:nth-child(3n+1){
            clear:left
        }
    }

<div class="video-item col-sm-6 col-xs-12 col-md-4 img-sec">
   Box 
</div>

   

СТРУКТУРА HTML:

<div id="video-page" >
  <div class="container">
      <h2><center>Video Library</center></h2>
      <div class="span12 details">
        {% for article in blogs.videos.articles reversed %}
            {% include 'iframevideoid', video_url:{{article.content | strip| strip_html}} %}


                    <div class="video-item col-sm-6 col-xs-12 col-md-4 img-sec">
                        <div class="kind">
                            <a class="open-popup" data-target="#myModal" data-toggle="modal" data-video-id="{{videoid}}" >
<!--                                {{ article.image.src | img_url: 'large'| img_tag: 'Video', 'img-responsive' }}  -->
                               <img src="https://img.youtube.com/vi/{{videoid}}/mqdefault.jpg" alt="Video" class="img-responsive">
                            </a>
                            <p class="para">
                              <a data-target="#myModal"  data-toggle="modal" data-video-id="{{videoid}}">
                                 <h3 class="pare-head">{{ article.title }}</h3>                                     
                              </a> 
                            </p>
                        </div>
                    </div>
    {% endfor %}
      </div>


    <!-- Modal -->

    {%include 'modal-video' %}
  </div>
</div>

Answer 1

Использование min-width неверно, в этом случае оно переопределит все остальные медиа CSS. См. Мой код ниже, я преобразовал ваш CSS в blue (не ясно) и red (ясно: слева) для облегчения понимания.

.video-item {
  height: 10px;
  width: 100%;
  background: blue;
  margin-bottom: 10px;
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 
    .video-item {
        background: red;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {  
    .video-item:nth-child(2n){
        background: red;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width:769px) and (max-width: 992px){
    .video-item:nth-child(3n){
        background: red;
    }
}

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

<div class="video-item">
</div>

Как видите, на средних устройствах только 3-ий предмет красного цвета:

на небольших устройствах, только 2-ые элементы красного цвета:

И очень маленькие устройства, все красные: