Как сделать так, чтобы мой код списка работал вертикально, а не горизонтально в 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>