Wyciąganie danych z bazy z uwzględnieniem trzech widoków dla różnych ekranów

Question

Mam taką sekcje
 

<section class="d-flex"id="own">
            @foreach ($owns as $own)
                
            @endforeach
            {{-- small devices --}}
            <div class="sd">
              <h1 class="text-center">Nasz produkt</h1>
              
              <div id="sdOwn1"class="container d-flex align-items-center justify-content-center "width="100vw;"height="100vh;">
                <div class="product">
                  <div class="col img-fluid randomProduct">
                    <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                  </div>
                </div>
                <div class="col col-p">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam unde eius eum quo totam dolorem vitae dolore ipsam, dolores porro!
                </div>
              </div>

              <div id="sdOwn2" class="container d-flex align-items-center justify-content-center"width="100vw;"height="100vh;">
                <div class="product">
                  <div class="col img-fluid randomProduct">
                    <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                  </div>
                </div>
                <div class="col col-p">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam unde eius eum quo totam dolorem vitae dolore ipsam, dolores porro!
                </div>
              </div>
            </div>

            {{-- small devices --}}

            {{-- medium devices --}}
            <div class="md">
              <h1 class="text-center">Nasz produkt</h1>
              <div class="container">

                  <div class="wine-row"  id="mdOwn1">
                    
                      <div class="wine-text-container">
                          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                      </div>
                      <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                  </div>

                  <div class="wine-row" id="mdOwn2">
                    <div class="wine-text-container">
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                    </div>
                    <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                  </div>

                <div class="wine-row" id="mdOwn3">
                  <div class="wine-text-container">
                      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                  </div>
                  <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                </div>

              </div>
            </div>
            {{-- medium devices --}}
            {{-- large devices --}}
            <div class="xl">
              <h1 class="text-center">Nasz produkt</h1>
              <div class="container">
                    <div class="wine-row" id="xlOwn1">
                        <div class="wine-text-container">
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                        </div>
                        <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                    </div>
                    <div class="wine-row" id="xlOwn2">
                      <div class="wine-text-container">
                          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                      </div>
                      <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                    </div>
                    <div class="wine-row" id="xlOwn3">
                      <div class="wine-text-container">
                          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit commodi deleniti non autem, nisi inventore ex vero molestiae itaque perferendis et. Voluptatem dolore placeat quae labore repudiandae, hic saepe fuga.</p>
                      </div>
                      <img src="{{ asset('images/services/obrazR800800.png') }}"alt="Nasz produkt">
                    </div>
              </div>
            </div>
            {{-- large devices --}}
          </section>

Zapytanie o media ustala która klasa jest wyświetlana. Mam 7 rekordów w bazie danych i chcę dla konkretnego widoku wyświetlić konkretne dane. W jaki sposób mogę poprawnie tego dokonać?

Answer 1

JavaScript może odczytać szerokość ekranu (o to ci chodzi?), mając takie dane wysyłasz odpowiednie zapytanie AJAX-em.