displaying block of two divs on half splitted index page - html

Question

I have a half-splitted index page. I use twitter bootstrap-v5.1.3 to split. On the left side I have two divs which have one text and one image class.
These divs are inside of flex-parent. So they are looking inline-block.
I want text on top and image on bottom which I mentioned below. But also text and image must be on center in "leftside col-md-6".
I need this:
body {
font-family: "Merriweather", sans-serif;
background-color: #fafafa;
overflow-x: hidden;
}
.leftside,
.rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width: 768px) {
.leftside,
.rightside {
height: 100vh;
}
}
.leftside {
background-color: #8a68ff;
opacity: 83%;
}
.rightside {
background-color: #ffffff;
}
.left-hero-text {
font-size: 48px;
font-weight: 400;
color: #ffffff;
}
.bold-text {
font-size: 55px;
font-weight: 700;
}
img {
width: 50%;
height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row gx-0">
<div class="col-md-6 gx-0">
<div class="leftside d-flex justify-content-center align-items-center">
<div class="left-hero-text">
<span class="bold-text">Lorem</span> ipsum
<span class="bold-text">dolor</span> sit amet
</div>
<img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
</div>
</div>
<div class="col-md-6 gx-0">
<div class="rightside d-flex justify-content-center align-items-center">
Right Side
</div>
</div>
</div>

Answer 1

You just need to change your inner flex container's direction to column.
body {
font-family: "Merriweather", sans-serif;
background-color: #fafafa;
overflow-x: hidden;
}
.leftside,
.rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width: 768px) {
.leftside,
.rightside {
height: 100vh;
}
}
.leftside {
background-color: #8a68ff;
opacity: 83%;
}
.rightside {
background-color: #ffffff;
}
.left-hero-text {
font-size: 48px;
font-weight: 400;
color: #ffffff;
}
.bold-text {
font-size: 55px;
font-weight: 700;
}
img {
width: 50%;
height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row gx-0">
<div class="col-md-6 gx-0">
<div class="leftside d-flex flex-column justify-content-center align-items-center">
<div class="left-hero-text">
<span class="bold-text">Lorem</span> ipsum
<span class="bold-text">dolor</span> sit amet
</div>
<img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
</div>
</div>
<div class="col-md-6 gx-0">
<div class="rightside d-flex justify-content-center align-items-center">
Right Side
</div>
</div>
</div>