I am aiming to create a unique layout with two rows, each spanning the full width of the viewport but containing only one column. The top row should have its content aligned at the bottom, while the bottom row should display its content at the top.
After experimenting with Bootstrap examples, I managed to achieve this layout: https://codepen.io/afagard/pen/QWpJWze
Despite the layout appearing as intended, I still question whether my approach is correct. I initially set the container height to 100vh, but it did not affect the flexboxes as expected. For now, I divided the rows into equal heights of 50vh. As someone more accustomed to backend work, I am taking this opportunity to delve into learning flexbox techniques.