响应无序列表

Question

我使用下面的代码来显示一系列特性：

<?php

    $values = get_field('features'); 
    if($values)
    {
        echo '<ul class="fa-ul product-features">';

        foreach($values as $value)
        {
            echo '<li><i class="fa-li fa  fa-check"></i>' . $value["feature_list"] . '</li>';
        }
        echo '</ul>';
    }

    ?>

我有一堆不同的清单，有不同数量的特色项目。有些有7里，另一些超过10。基本上，我使用下面的CSS，当第6个项目被输入时，它会启动一个新的专栏。

.product-features  {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 6em;
  margin-bottom: 1em;

  li {
    margin-right: 20px;
    height: 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }  
}

我怎样才能让这款手机友好。到现在为止，如果有3行，它将保持3行，即使是在三行大小上。我如何制作它，以便在column上，无论有多少列，它都成为小屏幕上的一列。

Answer 1

媒体查询将为您完成此操作，请参阅小提琴，并根据需要调整它以满足您的需要：https://jsfiddle.net/16q2xr8k/28/。

@media (max-width: 640px){
  .product-features  {
  display: inline;
  }  
}