Петля Laravel поврежденная конструкция

Question

У меня есть шаблон по умолчанию, который выглядит следующим образом

, когда я добавляю свой цикл, он становится таким:

Issue

Как вы видите на втором заполнении изображения и поля не такие, как по умолчанию, но вывод html выглядит хорошо

здеськод

<div class="col-md-5 col-xs-12 pad-l">
    <div class="row">
        @foreach($featuresTwo as $featuret)
            @if($loop->first)
                <div class="col-sm-12">
                    <div class="post-overaly-style hot-post-top clearfix">
                        <div class="post-thumb">
                            <a href="#">
                                <img class="img-fluid" src="theme/images/news/tech/gadget2.jpg" alt="" />
                            </a>
                        </div>
                        <div class="post-content">
                            <a class="post-cat" href="#">
                                @foreach($featuret->categories as $categoryt)
                                {{ $loop->first ? ' ' : ', ' }}
                                {{$categoryt->title}}
                                @endforeach
                            </a>
                            <h2 class="post-title title-large">
                                <a href="#">{{$featuret->title}}</a>
                            </h2>
                        </div><!-- Post content end -->
                    </div><!-- Post Overaly end -->
                </div><!-- Col end -->
            @else
                <div class="col-sm-6 pad-r-small">
                    <div class="post-overaly-style hot-post-bottom clearfix">
                        <div class="post-thumb">
                            <a href="#"><img class="img-fluid" src="theme/images/news/lifestyle/travel2.jpg" alt="" /></a>
                        </div>
                        <div class="post-content">
                            <a class="post-cat" href="#">
                                @foreach($featuret->categories as $categoryt)
                                    {{ $loop->first ? ' ' : ', ' }}
                                    {{$categoryt->title}}
                                @endforeach
                            </a>
                            <h2 class="post-title title-medium">
                                <a href="#">{{$featuret->title}}</a>
                            </h2>
                        </div><!-- Post content end -->
                    </div><!-- Post Overaly end -->
                </div><!-- Col end -->
            @endif
        @endforeach
    </div>
</div><!-- Col 5 end -->

Вопрос

Где я допустил ошибку?Как это исправить?

Спасибо.

ОБНОВЛЕНИЕ

оригинальный HTML без петли

<div class="col-md-5 col-xs-12 pad-l">
    <div class="row">
        <div class="col-sm-12">
        <div class="post-overaly-style hot-post-top clearfix">
            <div class="post-thumb">
                <a href="#">
                    <img class="img-fluid" src="images/news/tech/gadget2.jpg" alt="" />
                </a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Gadget</a>
                <h2 class="post-title title-large">
                    <a href="#">Samsung Gear S3 review: A whimper, when smartwatches need a bang</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->

        <div class="col-sm-6 pad-r-small">
        <div class="post-overaly-style hot-post-bottom clearfix">
            <div class="post-thumb">
                <a href="#"><img class="img-fluid" src="images/news/lifestyle/travel2.jpg" alt="" /></a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Travel</a>
                <h2 class="post-title title-medium">
                    <a href="#">Early tourists choices to the sea of Maldiv…</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->

        <div class="col-sm-6 pad-l-small">
        <div class="post-overaly-style hot-post-bottom clearfix">
            <div class="post-thumb">
                <a href="#"><img class="img-fluid" src="images/news/lifestyle/health1.jpg" alt="" /></a>
            </div>
            <div class="post-content">
                <a class="post-cat" href="#">Health</a>
                <h2 class="post-title title-medium">
                    <a href="#">That wearable on your wrist could soon...</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->
    </div>
</div><!-- Col 5 end -->

........................................................................................................................

Answer 1

Решено

На основе ответа wheelmaker я понял идею и изменил свой div после @else, чтобы он выглядел как

@if($loop->last)
  <div class="col-sm-6 pad-l-small">
@else
  <div class="col-sm-6 pad-r-small">
@endif

, и это решило проблему стиля.

PS: Я принимаю wheelmaker ответ, потому что он заставил меня понять проблему.

Answer 2

Исходный код для двух столбцов половинной ширины имеет один такой:

 <div class="col-sm-6 pad-r-small">

И один такой:

<div class="col-sm-6 pad-l-small">

Но вы использовали цикл для создания двухпримерно так:

<div class="col-sm-6 pad-r-small">

Вероятно, вам следует просто ввести элементы в массив $featuresTwo и удалить циклы, чтобы можно было точно воспроизвести код.