Problem with Bootstrap 5 Grid Layout and Button - html

Question

I am creating this web portfolio for my web design class with Bootstrap 5. I was able to get my elements to respond correctly for desktop, tablet, and mobile device break points except for the "View More" button on lg screen breakpoint; I simply want to place the same style button underneath the "I'm Nate Finn. Graphic Des...." photo in my desktop version without messing up the order of my photos or sending it down below in which it looks like a footer element. (It currently sits above the footer and looks a bit silly).
I know my columns count is messed up and there is some issue with divs but I cannot figure it out without rearranging everything! I have attached screenshots that included the empty space where I want to center the button:
<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="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->

Answer 1

You could use flexbox on the column, but a simple div wrapper with some top padding works fine to wrap the button below the image.
<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="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<div class="mt-3">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
</div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->