Javascript 清除mixitup筛选器使用的div

我使用MixitupJS过滤插件类型，其中每个div都封装在一列中

主要的一点是我不能使用清楚：两者都使用；CSS属性。 我在其他网站上通过使用

.parent-class .column-class:nth-of-type(3n+1){
   clear:both;
}

但在mixitup中，由于筛选器的原因，我无法将第n个项目作为目标，如果我在“自由”选项卡中单击，则我所目标的第n个项目将被其他div替换

由于联系人表格7的文本较长，分为两行，因此div的高度比其他表格高。我想针对最小宽度的第四个元素：992px；清除那个分区

HTML结构为：

<section class="plugin-listing-page">
<div class="col-sm-12 no-padding">
    <div class="wrap">
        <div class="plugin-type">
            <ul id="filters" class="clearfix post-filter-controls">
                <li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li>

                <li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li>
                <li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li>

            </ul>
        </div>
        <div class="filtr-container" id="pluginlist">
            <div class="col-md-4 col-sm-6 all listplugin free" data-bound="">
                <div class="single-plugin-list">
                    <div class="single-plugin-list-image">
                        <a href="">
                           <img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
                        </a>
                    </div>
                    <div class="single-plugin-list-content">
                        <h4 class="text-title"><a href="#">Test</a></h4>
                        <a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
                        <span class="theme-green pull-right">Free</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 all listplugin premium" data-bound="">
                <div class="single-plugin-list">
                    <div class="single-plugin-list-image">
                        <a href="">
                           <img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
                        </a>
                    </div>
                    <div class="single-plugin-list-content">
                        <h4 class="text-title"><a href="#">Test</a></h4>
                        <a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
                        <span class="theme-green pull-right">Free</span>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

---

有没有办法清除div的高度，使其始终浮动在浏览器的左侧？

我们有很多方法可以解决这个问题。然而，我会选择基于css的方法

@media (min-width: 992px) and (max-width: 1100px){     
  .single-plugin-list-content h4 a{
    font-size: 90%; // or smaller
  }
}

更新：

如果您可以使用flex，那么这将解决这个问题。它应该适用于所有屏幕。但是，您可以将其添加到最小宽度：992px媒体查询中。决定权在你

#pluginlist{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

---

我不能减少字体大小，它应该与其他页面的字体大小相同。我也不能使用最小高度作为标题标记。它可以是两行或更多行。如果我能清除柱子的高度就最好了。这样，另一列将以新行开始。

#pluginlist{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}