如何在Shopify中使列表代码垂直运行而不是水平运行？

Question

我已经为Shopify商店创建了一个供应商页面，它似乎运行良好，但是，现在，我希望它在垂直设置中跨4列按字母顺序运行列表。当前，列表在各列之间水平运行。有人可以看看我的代码，看看是否有可能吗？

{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}

<section class="section inner-page-section designer-section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="vendor-list">
  <div class="container">
    {% if section.settings.enable_headline %}
    <div class="row">
      <div class="col-sm-12">
        <h1 class="page-title text-center">{{ section.settings.headline | upcase }}</h1>
      </div>
    </div>
    {% endif %}

    <div class="desktop">
      <div class="row vendor-row">
        {%- for product_vendor in shop.vendors -%}
        <ul class="col-sm-3 col-xs-12 designers-list">
          {% assign its_a_match = false %}
          {% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
          {% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

          {% for collection in collections %}
          {% if my_collection_handle_stripped == collection.handle %}
          {% assign its_a_match = true %}
          {% endif %}
          {% endfor %}

          {% if its_a_match %}
          <li class=""><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor | upcase }}</a></li>
          {% else %}
          <li class="">{{ product_vendor | link_to_vendor | upcase }}</li>
          {% endif %}
        </ul>
        {%- endfor -%}
      </div>
    </div>
  </div>
</section>