Struggling with column height issues in Bootstrap 3? Consider using flexboxes for a simpler solution. Check out the design image I created using Bootstrap 3:
https://i.sstatic.net/PVCKm.png
Can this design be replicated with flexboxes? I have successfully implemented flexboxes for the main columns, but need guidance on nesting columns within the right main column. My attempt to integrate Bootstrap caused complications.
.call-out-container {
max-width: 1200px;
margin: 40px auto 0 auto;
}
.call-out {
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
flex-basis: 48%;
}
.call-out:nth-child(1) {background-color: pink}
.call-out:nth-child(2) {background-color:rgb(41, 255, 201)}
@media (min-width: 768px) {
.call-out-container {
display:flex;
justify-content: space-between;
}
}<div class="call-out-container">
<div class="call-out">
<h4>Headline 1</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
</div>
<div class="call-out">
<h4>Headline 2</h4><hr/>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>