Responsive unordered List
<p>I'm using the code below to display a list of features:</p>

<pre><code>&lt;?php

    $values = get_field('features'); 
    if($values)
    {
        echo '&lt;ul class="fa-ul product-features"&gt;';

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

    ?&gt;
</code></pre>

<p>I have a bunch of different lists with different amount of feature items. Some have 7 li points other have over 10. Basically I'm using the CSS below to when a 6th bullet is introudced it starts a new column. </p>

<pre><code>.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;
    }  
}
</code></pre>

<p>How do I make this mobile friendly. As of right now if there are 3 rows it will stay 3 rows even on col-sm size. How do I make it so that on col-sm no matter how many colums there are, it becomes one column on small screen size.</p>