0

I'm trying to achieve the following two column layout using Bootstrap 4:

layout-1

My problem is, when I add content to the right column, it "pushes" the left one below, like this:

layout-2

Here's my code so far:

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

<div class="row">
    <div class="col-md-6">B</div>
</div>

I'm not sure how to proceed next...

Chef Tony
  • 435
  • 7
  • 14
  • Related if not a duplicate - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css – Paulie_D Mar 18 '20 at 13:36

2 Answers2

1

You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                A
            </div>
            <div class="col-md-12">
                B
            </div>
        </div>
    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
Hardi Shah
  • 343
  • 2
  • 15
1

Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col">A</div>
        </div>

        <div class="row">
            <div class="col">B</div>
        </div>

    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec at orci porta, suscipit
        felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
        aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
        orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
        eget consequat sem dapibus nec.
    </div>
</div>
EReload
  • 199
  • 2
  • 12