Bootstrap 5 Layout Conversion
@while ($query->have_posts())
@php $query->the_post(); @endphp
{{– Display Featured Image –}}
@if (has_post_thumbnail())
@endif
{{ get_the_title() }}
{{get_field('location_address')}},{{get_field('location_zip')}} {{get_field('location_name')}}
{{__('Tel.','sage') }}: {{get_field('location_phone')}}
{{__('Öffnungszeiten') }}:{{get_field('hours_service')}}
@endwhile
@php wp_reset_postdata(); @endphp
@else
No locations found.
@endif
covnert above bootstrap 5 d-flext 3 col in desktiop and 1 column in mobile
<div class="location_container d-flex flex-wrap">
@if ($query->have_posts())
@while ($query->have_posts())
@php $query->the_post(); @endphp
<div class="loacation-box d-flex flex-column col-12 col-md-6 col-lg-4">
{{-- Display Featured Image --}}
@if (has_post_thumbnail())
<div class="fetured-img">
<img src="{{ get_the_post_thumbnail_url(null, 'full') }}" class="img-thumbnail" alt="{{ get_the_title() }}">
</div>
@endif
<div class="location-detail flex-grow-1 d-flex flex-column">
<h2>{{ get_the_title() }}</h2>
<p class="location-address">{{ get_field('location_address') }},<br>{{ get_field('location_zip') }} {{ get_field('location_name') }}</p>
<p class="location-phone">{{ __('Tel.', 'sage') }}: <span class="blue-text">{{ get_field('location_phone') }}</span></p>
<p class="location-time"><span>{{ __('Öffnungszeiten') }}:</span><br>{{ get_field('hours_service') }}</p>
</div>
</div>
@endwhile
@php wp_reset_postdata(); @endphp
@else
<p>No locations found.</p>
@endif
</div>### Changes made:
– **`d-flex flex-wrap`** on the main container to allow wrapping elements.
– **`d-flex flex-column`** inside each location box to stack elements properly.
– **Columns:**
– `col-12` for mobile (1 column).
– `col-md-6` for tablets (2 columns).
– `col-lg-4` for desktops (3 columns).
– **`flex-grow-1`** inside `.location-detail` to ensure equal height for the content.
This will ensure:
– 1 column on mobile (`col-12`).
– 2 columns on tablets (`col-md-6`).
– 3 columns on desktop (`col-lg-4`).