如何在Laravel Blade的foreach循环中实现图文位置动态交替？

针对你的需求，我整理了几个简单高效的实现方式，结合你的Laravel Blade + Bootstrap技术栈，优先推荐Blade循环变量或CSS选择器方案，省心又实用：

方案1：利用Laravel Blade的$loop变量（服务端控制布局） #

Laravel的@foreach自带$loop变量，能直接获取当前循环的奇偶状态，我们可以用它判断是否交换列的顺序。这种方式渲染出的HTML结构本身就是交替的，对SEO更友好，也不需要额外CSS调整。

修改你的代码如下：

@foreach ($offers as $offer)
<div class="offersNew">
    <div class="row row-equal-height">
        {{-- 判断是否为偶数行，交换列顺序 --}}
        @if($loop->even)
            {{-- 偶数行：图片列在前 --}}
            <div class="col-md-6 main-background hidden-sm hidden-xs max400" style="background-image:url('{{ $offer->image or '' }}')">
            </div>
            <div class="col-md-6 paddedCol6">
                <div class="inner">
                    <h2 class="centered marginTop0">{{ $offer->title or 'No title' }}</h2>
                    <h3 class="sub-header centered">{{ $offer->sub_header or '' }}</h3>
                    <p class="centered">
                        {{ mb_strimwidth(strip_tags($offer->homepage_description), 0, 200, '...') }}
                    </p>
                    <div class="callToAction">
                        <center>
                            <a href="/offer/{{ $offer->slug or $offer->id }}">
                                <button class="buttonOne"><p class="sub-header line0 margin1 white smallerText">&nbsp;&nbsp;Let&apos;s Go!&nbsp;&nbsp;</p></button>
                            </a>
                            <a href="/offer/{{ $offer->slug or $offer->id }}">
                                <button class="buttonTwo"><p class="sub-header line0 margin1 blue smallerText">Other Offers</p></button>
                            </a>
                        </center>
                    </div>
                    @if ($offer->countdown == 1)
                        <div class="row countdown" data-timer="{{ $offer->end }}">
                            <h2 class="sub-header centered">
                                <span class="blueText">OFFER END</span>
                                <span class="days">0</span>:
                                <span class="hours">0</span>:
                                <span class="minutes">0</span>:
                                <span id="seconds"></span>
                                <span id="offerEndtime">0</span>
                            </h2>
                        </div>
                    @endif
                </div>
            </div>
        @else
            {{-- 奇数行：保持原布局，文本列在前 --}}
            <div class="col-md-6 paddedCol6">
                <div class="inner">
                    <h2 class="centered marginTop0">{{ $offer->title or 'No title' }}</h2>
                    <h3 class="sub-header centered">{{ $offer->sub_header or '' }}</h3>
                    <p class="centered">
                        {{ mb_strimwidth(strip_tags($offer->homepage_description), 0, 200, '...') }}
                    </p>
                    <div class="callToAction">
                        <center>
                            <a href="/offer/{{ $offer->slug or $offer->id }}">
                                <button class="buttonOne"><p class="sub-header line0 margin1 white smallerText">&nbsp;&nbsp;Let&apos;s Go!&nbsp;&nbsp;</p></button>
                            </a>
                            <a href="/offer/{{ $offer->slug or $offer->id }}">
                                <button class="buttonTwo"><p class="sub-header line0 margin1 blue smallerText">Other Offers</p></button>
                            </a>
                        </center>
                    </div>
                    @if ($offer->countdown == 1)
                        <div class="row countdown" data-timer="{{ $offer->end }}">
                            <h2 class="sub-header centered">
                                <span class="blueText">OFFER END</span>
                                <span class="days">0</span>:
                                <span class="hours">0</span>:
                                <span class="minutes">0</span>:
                                <span id="seconds"></span>
                                <span id="offerEndtime">0</span>
                            </h2>
                        </div>
                    @endif
                </div>
            </div>
            <div class="col-md-6 main-background hidden-sm hidden-xs max400" style="background-image:url('{{ $offer->image or '' }}')">
            </div>
        @endif
    </div>
</div>
@endforeach

小提示：$loop->even直接判断当前是否为偶数行，如果你习惯用索引计数，也可以用$loop->index % 2 == 1来判断，效果是一样的。

方案2：纯CSS实现（无需修改HTML结构） #

如果不想改动Blade循环的代码结构，也可以用CSS的:nth-child()选择器，配合Bootstrap默认的flex布局特性，翻转偶数行的列顺序。

添加以下CSS代码即可：

/* 针对偶数行的.row，翻转flex子元素的顺序 */
.offersNew:nth-child(even) .row {
    flex-direction: row-reverse;
}

/* 可选：如果你的列有不对称样式（比如单边内边距），调整偶数行样式保持视觉一致 */
.offersNew:nth-child(even) .paddedCol6 {
    /* 示例：原paddedCol6有左内边距，翻转后改成右内边距 */
    padding-left: 0;
    padding-right: 2rem;
}

这个方案的优点是代码简洁，不需要重复编写Blade代码；缺点是如果列有不对称的自定义样式，需要额外调整偶数行的样式来匹配。

方案3：JavaScript动态调整（不推荐，仅作补充） #

如果因为特殊原因不能用服务端或CSS方案，也可以用JS动态交换列的顺序，但这种方式会有页面加载后的闪烁问题，仅作备选：

document.addEventListener('DOMContentLoaded', function() {
    const offerRows = document.querySelectorAll('.offersNew');
    offerRows.forEach((row, index) => {
        // 偶数行（索引从0开始，所以index%2===1）交换列位置
        if (index % 2 === 1) {
            const rowContainer = row.querySelector('.row');
            const cols = rowContainer.querySelectorAll('.col-md-6');
            rowContainer.appendChild(cols[0]); // 将第一个列移到末尾，实现翻转
        }
    });
});

内容的提问来源于stack exchange，提问作者The Real Dude