Problem: There is a picture of a dog and 4 small paragraphs under the dog. While expanding the screen to pop the 4 paragraphs next to the picture of a dog in a 2x2 layout (2 paragraphs on top, 2 paragraphs on bottom), only 2 of the 4 paragraphs are moving over, while the other 2 paragraphs are stuck underneath the photo. Or, while tinkering with the code below, the 4 paragraphs will pop side-by-side (horizontally) next to the photo (as opposed to 2x2), and I don't want that either.
Side note #1: I know the "col-mid-2" and "col-lg-2" code above is incorrect; they're there as a placeholder for now.
Side note #2: The paragraphs pop around fine using Mobile/XL and Small breaking points, but I'm having issues with the medium/large breaking points (per the first paragraph).
What am I doing wrong?
<!-- bootstrap version 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<body>
<h1>Grid Layout</h1>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-8 col-lg-8">
<img class="img-fluid" src="https://source.unsplash.com/Sg3XwuEpybU" alt="">
</div>
<div class="col-12 col-sm-6 col-md-2 col-lg-2">
<p>
<h5>Fun fact #1:</h5> Dogs are not color blind. Contrary to popular belief, they can actually see most colors!</p>
</div>
<div class="col-12 col-sm-6 col-md-2 col-lg-2">
<p>
<h5>Fun fact #2:</h5>Tail wags have multiple meanings. It could mean that they are feeling happy, sad, or angry.</p>
</div>
<div class="col-12 col-sm-6 col-md-2 col-lg-2">
<p>
<h5>Fun fact #3:</h5>Three dogs actually survived the Titanic sinking in April of 1912. They were all in first class.</p>
</div>
<div class="col-12 col-sm-6 col-md-2 col-lg-2">
<p>
<h5>Fun fact #4:</h5>Small dogs live longer. This is due to the belief that, the smaller the dog, the less the heart needs to work to pump blood.</p>
</div>
</div>
</div>
</body>