Django для цикла на основе размера мобильного/экрана

У меня есть страница товара на Django с циклом for, который отображает товары следующим образом:

picture | info
info | picture
picture | info 
...

Это сделано с помощью цикла forloop.counter|divisibleby:. Макет выглядит отлично на рабочем столе, но очень странно на мобильном. Есть ли способ предотвратить запуск этого цикла, если размер экрана меньше/мобильнее?

Найдите мой код ниже:

  {% for category in categories  %}
                {% if forloop.counter|divisibleby:'2' %}                    
                    <a href="{% url 'academy:brandByCat_list' category.category_name %}">
                        <div class="row py-3 item-display">

                            <div class="col-md item-text">
                                <h1 class='py-3'>{{category.category_name}}</h1>
                                <p>{{category.category_info | linebreaks}}
                            </div>

                            <div class='col-md item-img'>
                                <img src= {{category.category_picture.url}} class="img-fluid category-picture">
                            </div>

                        </div>
                    </a>                
                    {% else %}
                        <a href="{% url 'academy:brandByCat_list' category.category_name %}">
                            <div class="row py-3 item-display">

                                <div class='col-md item-img'>
                                    <img src= {{category.category_picture.url}} class="img-fluid category-picture">
                                </div>

                                <div class="col-md item-text">
                                    <h1 class='py-3'>{{category.category_name}}</h1>
                                    <p>{{category.category_info | linebreaks}}
                                </div>

                            </div>
                        </a>
                {% endif %}
           {% endfor %}

Поскольку шаблоны Django отображаются на сервере, у вас нет информации о размере экрана пользователя. Я думаю, вам придется использовать css или javascript, чтобы получить желаемые результаты.

Вернуться на верх