使用foreach循环输出多列div时如何实现交替顺序排布

实现方案 #

方案1：Blade 模板层面调整顺序 #

如果需要固定交换每行的第3、4个div位置，直接调整代码中的div排列顺序即可：

@foreach($data as $value)
<div class="row ">
    <div class="col-md-6">
    content-1
    </div>
    <div class="col-md-6">
    content-2
    </div>
    <div class="col-md-6">
    content4
    </div>
    <div class="col-md-6">
    Content Three
    </div>
</div>
@endforeach

如果需要实现交替排布，比如奇数行保持原有顺序、偶数行交换两个div的位置，可以借助Blade循环自带的$loop变量判断：

@foreach($data as $value)
<div class="row ">
    <div class="col-md-6">
    content-1
    </div>
    <div class="col-md-6">
    content-2
    </div>
    @if($loop->even)
        {{-- 偶数行交换顺序 --}}
        <div class="col-md-6">
        content4
        </div>
        <div class="col-md-6">
        Content Three
        </div>
    @else
        {{-- 奇数行保持原顺序 --}}
        <div class="col-md-6">
        Content Three
        </div>
        <div class="col-md-6">
        content4
        </div>
    @endif
</div>
@endforeach

方案2：CSS 实现（无需修改后端逻辑） #

用flex布局的order属性控制展示顺序，代码改动最小，更适合纯展示层面的顺序调整：

1. 给row添加自定义类名alternate-row：

@foreach($data as $value)
<div class="row alternate-row">
    <div class="col-md-6">
    content-1
    </div>
    <div class="col-md-6">
    content-2
    </div>
    <div class="col-md-6">
    Content Three
    </div>
    <div class="col-md-6">
    content4
    </div>
</div>
@endforeach

2. 添加对应CSS样式：

/* 偶数行交换第3、4个col的展示顺序 */
.alternate-row:nth-child(even) .col-md-6:nth-child(3) {
    order: 2;
}
.alternate-row:nth-child(even) .col-md-6:nth-child(4) {
    order: 1;
}

内容的提问来源于stack exchange，提问作者sanjay yadav