Question

我有一个基于引导程序的模板，该模板输出带有按钮和图像的文本。通过复选框，您可以在此处选择图片显示在文本的右侧还是左侧。

现在，我有一个问题，即文本和按钮始终显示在移动视口中图片的上方或下方。但我希望文本和按钮始终显示在图片下方。

我只是不知道如何自定义模板。由于无法使用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>

这就是在台式机上的样子：

这就是手机上的样子。在这里，我只希望文本始终显示在图片下方而不是上方：

Answer 1

我已经通过引导类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');
  }
});

自定义移动视口的引导程序模板

1 个答案: