How to make different foreach in laravel based on screen size?

Question

HTML

There is a slider. Each slide has 6 cards. Implemented like this:

@foreach($slider->chunk(6) as $slider_chunk)
        <div class="swiper-slide examples__slide">

          @foreach($slider_chunk as $slide)
          <div class="col-md-4">
            <a href="#" id="objects-open" class="object pop-up-open">
              <div class="object__overlay">
                <img src="{{ $slide->img_path }}" alt="">
              </div>
              <div class="object__info">
                <h4 class="object__title">{{ $slide->title }}</h4>
                <span class="object__location">{{ $slide->location }}</span>
              </div>
              <span class="object__price">{{ $slide->price }} &#8364;</span>
            </a>
          </div>
          @endforeach

        </div>
        @endforeach

I need to have one card in each slide on the mobile version, and not 6, as in the desktop one.
How can I do that?

Answer 1

This is not done on the backend.

Answer 2

stackoverflow.com/questions/23779088/laravel-detec...

Answer 3

This is how it works:
a request to the server -> the server processes the request (here is your foreach) -> response to the browser in the form of html (here you can get the size of the browser using css)
Are you asking how to go back in time? No way.
Your approach is not correct. You need to customize the code not on the server, but in the browser. Or, as a clumsy option, create 2 displays, 1 make display: none; then in the browser, depending on the screen size, change the visibility of the blocks.
You can define a mobile device on the server in the server settings, for example, and redirect to the mobile subdomain, then configure routing and feed two different templates. But given your question, don't even try. First you need to understand how websites work.

Answer 4

<div class="col-md-4">try replacing it with something like <div class="col-xs-12 col-sm-6 col-md-4">