text does not want to be under the image. using bootstrap - html

Question

Hi guys do you know how to make this text under the image. i've tried use absolute on the text and it's work but when i test the responsive text gonna be the bottom of content not under the picture.
#sorryforbadenglish
.fitur {
padding: 15px 0;
text-align: center;
}
.fitur .btn-get-started {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 28px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background-image: url("../img/gplay.png");
background-size: cover;
width: 210px;
height: 61px;
}
.fitur .col-half-offset {
margin-left: 4.166666667%
}
.fitur p.sub {
font-size: 16px;
font-family: "Ubuntu", sans-serif;
font-weight: 700;
}
.fitur img {
max-width: 200%;
transition: all 0.4s ease-in-out;
display: inline-block;
padding: 15px 0;
}
.fitur img:hover {
transform: scale(1.15);
}
#media (max-width: 768px) {
.fitur img {
max-width: 100%;
}
}
#media (min-width: 1024px) {}
#media (max-width: 500px) {}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="fitur" class="fitur section-bg">
<div class="container" data-aos="zoom-in">
<div class="section-title">
<p style="margin-top: 100px;">Fitur</p>
<h3>Aplikasi</h3>
</div>
<div class="row">
<div class="col-lg-2 d-flex align-items-center justify-content-center">
<img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
<p class="sub">Jual Sampah</p>
</div>
<div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
<img src="assets/img/aplikasi/02.png" class="img-fluid" alt="">
<p class="sub">Harga Real Time</p>
</div>
<div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
<img src="assets/img/aplikasi/05.png" class="img-fluid" alt="">
<p class="sub">Transaksi Terdata</p>
</div>
<div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
<img src="assets/img/aplikasi/06.png" class="img-fluid" alt="">
<p class="sub">Layanan Komunikasi</p>
</div>
<div class="col-lg-2 col-half-offset d-flex align-items-center justify-content-center">
<img src="assets/img/aplikasi/07.png" class="img-fluid" alt="">
<p class="sub">Rangkuman Transaksi</p>
</div>
</div>
<div class="d-flex">
</div>
</div>
</section>
the result is :
The text is next to the image, can you help me how to take it under the image ?

Answer 1

Add flex-column to the parent div which contains the image and text. Like this
<div class="col-lg-2 d-flex align-items-center justify-content-center flex-column">
<img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
<p class="sub">Jual Sampah</p>
</div>
By default the flex direction is row and it needs to be set to column so that the image and text are stacked on top of each other