基于屏幕尺寸控制Django for loop布局的移动端适配问题

服务端渲染的Django模板没法直接根据用户屏幕尺寸调整循环逻辑——模板是在服务器生成好再发送给浏览器的，根本不知道用户用的是手机还是电脑。要解决移动端显示异常的问题，用CSS媒体查询是最靠谱的方案，给你两种实现思路：

方案一：统一模板结构（更简洁易维护） #

先把模板里重复的代码合并，去掉forloop.counter的判断逻辑，所有分类项都用同一种DOM结构：

{% for category in categories %}
<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 }}</p>
        </div>
    </div>
</a>
{% endfor %}

再用CSS实现桌面端的交替布局，同时在移动端统一垂直排列：

/* 桌面端（≥768px）：偶数项反转图片和文字顺序 */
@media (min-width: 768px) {
    .item-display:nth-child(even) {
        flex-direction: row-reverse;
    }
}

/* 移动端（<768px）：所有项垂直排列，图片在上 */
@media (max-width: 767px) {
    .item-display {
        flex-direction: column;
    }
    .item-img {
        margin-bottom: 1rem; /* 增加间距提升可读性 */
    }
}

方案二：基于现有代码修复移动端布局 #

如果不想修改现有模板结构，直接给现有代码添加CSS规则，强制移动端统一布局：

/* 移动端强制所有项垂直排列，统一图片和文字顺序 */
@media (max-width: 767px) {
    .item-display {
        flex-direction: column !important;
    }
    .item-img {
        order: 1;
        margin-bottom: 1rem;
    }
    .item-text {
        order: 2;
    }
}

原理是：移动端时把所有.item-display的弹性布局方向改为垂直，同时强制图片容器的优先级高于文字，不管服务端生成的是左图右文还是左文右图，移动端都会统一成图片在上、文字在下的垂直结构。

内容的提问来源于stack exchange，提问作者Thomas Doll-Datema