overlapping div element

How can I get this using bootstrap?

*circles are overlapped

HTML:

<div class="container mt-10 bg-light">
        <div class="row">
            <div class="col-6 bg-warning">
                <div class="d-flex justify-content-center m-5">
                    <div class="d-flex justify-content-start">
                        <div
                            class="d-flex justify-content-center align-items-center border border-secondary rounded-circle sex2">
                            M</div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <div
                            class="d-flex justify-content-center align-items-center border-secondary border rounded-circle BG2">
                            BG
                        </div>
                    </div>

                    <div class="d-flex justify-content-end align-items-end">
                        <div
                            class="d-flex justify-content-center align-items-center border-secondary border rounded-circle age2">
                            A
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6"></div>
        </div>

css:

.sex2 {
  width: 4rem;
  height: 4rem;
}
.age2 {
  width: 4rem;
  height: 4rem;
}
.BG2 {
  width: 10rem;
  height: 10rem;
}

Is there a better way?

• image for demonstration purposes.