Putting Text over Image while being responsive - html

Question

How do i place text over image div in certain position while keeping it responsive(doesn't move from that spot on smaller devices or bigger)
Problem im getting is that most of the content wont fit like i want it or wont even stick to image in smaller devices, so i need solution on how to solve this one,placing 3 text divs on image div without using method of making background image, i need it to work with tag
Bootstrap v4
i tried this:
CODEPEN
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test"><h2>Gradjevina koja se gradi duze od egipatskih piramida</h2></div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="#asset('/images/slider-1.png')">
</div>
</div>
and CSS:
.cover-image {
position: relative;
}
.slider .image-link {
position: absolute;
bottom: 20px;
left: 10px;
width: 100%;
color: white;
}
.img-test {
font-family: Oswald;
font-size: 40px;
font-weight: 600;
position: absolute;
bottom: 50px;
left: 10px;
color: white;
text-transform: none;
}
.slider .image-date {
position: absolute;
bottom: 150px;
left: 10px;
color: white;
border-bottom: 1px solid white;
margin-bottom: 0;
}
<div class="slider">
<div class="cover-image">
<div class="image-link">
<div class="image-date">
<p>08.10.2017</p>
</div>
<div class="image-text">
<div class="img-test">
<h2>Gradjevina koja se gradi duze od egipatskih piramida</h2>
</div>
</div>
Eskterijer
</div>
<img class="img-fluid" src="http://vietlongtravel.com/wp-content/uploads/2017/05/151548909_high-770x530.jpg">
</div>
</div>