Php 每张幻灯片上的项目

我用Bootstrap制作了一个logo滑块（基本上如图所示）

每张幻灯片中有4个徽标。我想让它更具响应性，在更小的屏幕上，每张幻灯片只显示2个徽标。我不知道最好的方法是什么

我可以通过媒体查询将网格宽度增加一倍至50%，但在2x2网格中，每张幻灯片仍将显示4个

另一种方法是复制整个幻灯片并隐藏和显示正确的幻灯片，但这似乎是一种效率相当低的方法

所以我真的需要减少每张幻灯片加载时的徽标数量。。但是怎么做呢

我使用WP和高级自定义字段来填充滑块。简化代码如下：

PHP:

---

经过更多的搜索，看起来Slick是一个解决方案，它将处理这个问题

jsfiddle.net/BishopBarber/ufnjkjy4/1/

<?php
    $firstslide = 0;
    $slide = 0;
    $repeater = get_field('clients', $clients);
    $order = array();
    foreach( $repeater as $i => $row ) {
        $order[ $i ] = $row['name'];
    }

    array_multisort($order, SORT_ASC, $repeater);

    if($repeater):
        foreach($repeater as $i => $row):
            if ($firstslide == 0) {
                $class = "item active";
            } else {
                $class = "item";
            };

            if ($slide == 0) {
                echo '<div class="' . $class . '">';
            };
        ?>
            <div class="grid-4">
                <img src="<?php echo $row['logo']; ?>">
            </div>
        <?php
            if ($slide == 4) {
                echo '</div>';
                $slide = 0;
            } else {
                $slide++;
            }
            $firstslide++;
        endforeach; 
        wp_reset_postdata();
    endif;
?>

<div class="item active">
    <div class="grid-4"><img src="logo1.jpg"></div>
    <div class="grid-4"><img src="logo2.jpg"></div>
    <div class="grid-4"><img src="logo3.jpg"></div>
    <div class="grid-4"><img src="logo4.jpg"></div>
</div>
<div class="item">
    <div class="grid-4"><img src="logo5.jpg"></div>
    <div class="grid-4"><img src="logo6.jpg"></div>
    <div class="grid-4"><img src="logo7.jpg"></div>
    <div class="grid-4"><img src="logo8.jpg"></div>
</div>
<div class="item">
    <div class="grid-4"><img src="logo9.jpg"></div>
    <div class="grid-4"><img src="logo10.jpg"></div>
    <div class="grid-4"><img src="logo11.jpg"></div>
    <div class="grid-4"><img src="logo12.jpg"></div>
</div>

.grid-4 {
    width: 25%;
}