making columns inside a main column with flexbox

user_7736083 0
Viewed 151

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.

enter image description here

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>

flexbox css html
1 Answers

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.

user_94804440
Related