Альтернативное положение изображения / текста в динамических данных цикла foreach

Question

Итак, я отображаю два блока данных в формате листов с помощью начальной загрузки. У меня может быть две половины строки.В этом случае справа у меня есть изображение, слева у меня есть div, который отображает текст и кнопки.Я намерен, чтобы четные строки имели изображение слева и нечетное справа.Таким образом, в основном изображение всегда будет сверху и под текстом.Чередование в каждом ряду div будет зеркально отражено.

Используя javascript, blade, php или css, как я могу достичь этого эффекта?

@foreach ($offers as $offer)
    <div class="offersNew">
    <div class="row row-equal-height">
        <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>
    </div>
</div>
@endforeach

Answer 1

Добавьте переменную count и используйте модуль для чередования.

$count = 0;

foreach($offers as $offer){
    if($count % 2 == 0){
        // show variation 1
    }else{
        // show variation 2
    }
    $count++;
}