Настройте шаблон начальной загрузки для мобильного видового экрана - PullRequest
Новая
       6

Настройте шаблон начальной загрузки для мобильного видового экрана

0 голосов
/ 11 октября 2018

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

Теперь у меня проблема в том, что текст и кнопка всегда отображаются над или под изображением в окне мобильного просмотра.Но я хочу, чтобы текст и кнопка всегда появлялись под картинкой.

Я просто не могу понять, как настроить шаблон.Поскольку я не могу прочитать размер области просмотра с помощью PHP, я не могу думать ни о чем, кроме JavaScript.Или есть способ получше и проще? 

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  </head>
  <body>
    </section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Privatumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Büroumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Projektumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Möbelmontage</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Mitarbeiterumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Möbellogistik</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>
  </body>
</html>


</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Privatumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Büroumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Projektumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Möbelmontage</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Mitarbeiterumzüge</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
    </div>
  </div>
</section>
<section id="leistungen" class="projects-section bg-light">
  <div class="container">
    <div class="row no-gutters mb-4 mb-lg-5">
      <div class="col-xl-8 col-lg-12">
        <img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
      </div>
      <div class="col-xl-4 col-lg-12">
        <div class="featured-text">
          <h4>Möbellogistik</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
        </div>
        <a href="#kontakt" class="btn btn-primary js-scroll-trigger">Anfrage stellen!</a>
      </div>
    </div>
  </div>
</section>

Вот как это выглядит на рабочем столе:

enter image description here

И вот как это выглядитна мобильном телефоне.Здесь я просто хочу, чтобы текст всегда отображался под картинкой, а не поверх нее:

enter image description here

1 Ответ

0 голосов
/ 14 октября 2018

Я решил это с помощью классов начальной загрузки d-flex и flex-column-reverse. 

$(window).resize(function(){
  // add bootstrap flex classes to :even rows if viewport is smaller then 1200px, remove otherwise
  if ($(window).width() < 1200){
    $('.services-section:even .row').addClass('d-flex flex-column-reverse');
  }else{
    $('.services-section:even .row').removeClass('d-flex flex-column-reverse');
  }
});
...