My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image.
On a desktop screen, everything functions smoothly with four images of team members displayed in a row. Clicking on an image reveals the corresponding bio below them.
However, the layout changes on mobile devices, with the images stacked vertically. When clicking on a team member, the bio appears at the bottom after the fourth person instead of directly underneath the clicked person.
My goal is to have the bio display right under the person whose image is clicked.
For instance, refer to the below sample image to get a better understanding:
Here is a section of the code snippet for reference:
<section class="p-5">
<div class="container" id="biolevelone">
<div class="row">
<div class="col-md-3 col-sm-6">
<div data-toggle="collapse" href="#bio1"><img src="image1.png"/></div>
</div>
<div class="col-md-3 col-sm-6">
<div data-toggle="collapse" href="#bio2"><img src="image2.png"/></div>
</div>
<div class="col-md-3 col-sm-6">
<div data-toggle="collapse" href="#bio3"><img src="image3.png"/></div>
</div>
<div class="col-md-3 col-sm-6">
<div data-toggle="collapse" href="#bio4"><img src="image4.png"/></div>
</div>
</div> <!-- row -->
<div class="collapse pt-2" id="bio1" data-parent="#biolevelone">
<div class="card-body">
<p>Bio text, a couple of paragraphs</p>
</div>
</div>
<div class="collapse pt-2" id="bio2" data-parent="#biolevelone">
<div class="card-body">
<p>Bio text, a couple of paragraphs</p>
</div>
</div>
<div class="collapse pt-2" id="bio3" data-parent="#biolevelone">
<div class="card-body">
<p>Bio text, a couple of paragraphs</p>
</div>
</div>
<div class="collapse pt-2" id="bio4" data-parent="#biolevelone">
<div class="card-body">
<p>Bio text, a couple of paragraphs</p>
</div>
</div>
</div><!--biolevelone data parent -->
</section>
I attempted to rearrange the code for the bio text cards, placing it between each profile image div. Unfortunately, this resulted in a different issue where on desktop screens, the profile images disappeared from the row and moved below the bio text upon clicking, although it worked correctly on mobile devices.