带有树枝循环的scss（媒体查询）网格

Question

我无法使用scss中的网格创建简单的列。当我要制作网格时，第一个循环按我的意愿进行，但是第二个是在内部先进行。在HTML中，我使用了细枝，但我认为有问题，但我无法弄清楚。

我尝试了flexbox和float和{{loop.index0}}，但没有任何变化。我刚接触Twig（PHP），就被困住了。

<section class="collections" id="collection">
        <hr class="line">
        <div class="collection-header pt-1 text-center">
            <p>Collections</p>
        </div>
        <!-- Slider main container -->
        {% for collection in post.get_field("collections") %}
        <hr class="collection-line">
        <div class="collection-name mx-auto text-center">
            <p class="py-2">{{collection.collection_name}}</p>
        </div>
        <div class="collection-size">
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <ul class="swiper-wrapper my-gallery">
                    <!-- Slides -->
                    {% for img in collection.gallery %}
                    <li class="swiper-slide" data-swiper-autoplay="6000">
                        <a title="click to zoom-in" href="{{img.url|resize(800)}}" itemprop="contentUrl" data-size="800x1200">
                        <img class="lazyload d-block w-100" data-src="{{img.url|resize(350)}}" data-sizes="auto" data-srcset="
                            {{img.url|resize(400)}} 768w
                            ,{{img.url|resize(900)}} 1024w
                            {{img.width >= 1200 ? ',' ~ img.url|resize(1000) ~ ' 1200w' }}
                            {{img.width >= 1400 ? ',' ~ img.url|resize(2000) ~ ' 2048w' }}">
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                <!-- If we need pagination -->
                <div class="swiper-pagination swiper-pagination-white"></div>
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev swiper-button-white"></div>
                <div class="swiper-button-next swiper-button-white"></div>
            </div>
            {% endfor %}   
        </div>
    </section>

.collections {

        .collection-header {
            p {
                font-size: 1.8rem;
                margin-top: 0;
            }
        }

        .collection-name {
            p {
                font-size: 1.2rem;
            }
        }

        .collection-size {
            min-height: 30rem;
            min-width: 24rem;

            .swiper-container {
                margin-top: 4rem;
                max-width: 15rem;
                height: 30rem;

                .swiper-wrapper {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }
            }
        }
    }

如何解决它，使其在媒体查询中像CSS / SCSS中的普通网格一样，但不删除树枝和引导程序类？