making columns inside a main column with flexbox

Question

I have made the below image in Bootstrap 3. I am programming for a site there is using BS3. There is no possibility to use BS4.

I am having so many problems with the column height with BS3, so I am giving up now. I started working with flexboxes last week, because it seems so much easier to work with.

Is it possible to make the design lige on the image with flexboxes? I have made the 2 main columns with flexboxes, but I am not quite sure how to make the 2 columns inside the right main column. I tried to fit some bootstrap in it, but that went totally wrong.

.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>

Answer 1

In order to create the design on the right using flexbox, you need to:

1. Take your two columns and wrap them into a separate div.

   <div class="call-out">
            <h4>Headline 2</h4><hr/>
            <div class="two-column">
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>

            </div>
        </div>

In this example I wraped the two columns into a div called two column

2. Display Flex the newly created div

.two-column{
    display: flex;
    flex-direction: row;
}

You can see the result here:

Please Note: You will have to add some adjustments/media-queries to give your desired responsive behavior, however this approach should easily allow you to create your nested-column layout.

Helpful Note: Remember you can always display: flex elements that are children on elements that are already using display: flex

Hope it helps.