My current template, based on Bootstrap, displays a text along with a button and an image. Using a checkbox, you can choose whether the image appears to the right or left of the text.
One issue I'm facing is that in the mobile view, the text and button always display above or below the image. However, I want them to always appear below the image.
I'm struggling to customize the template as I cannot access the viewport size with PHP. I'm thinking JavaScript might be a solution, but I'm wondering if there's a simpler way?
<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>
... (more sections)
</body>
</html>
</section>
... (more sections)
</section>This is how it appears on desktop:
https://i.sstatic.net/Vr8bW.png
And this is how it looks on mobile. Here, my goal is to always have the text below the image, not overlapping: