Bootstrap stacking columns incorrectly [duplicate] - css

Question

This question already has answers here:
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 3 years ago.
I'm having trouble stacking my columns correctly using bootstrap - as you can see from the image I need the black box positioned below green box but I can't get this to work:
Here is the code I am using:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
</div>
</div>
Can someone please tell me where I am going wrong here?
Thanks

Answer 1

You have 2 columns and you put first div into 1 column and second inside the 2 one and next div will go angain inside the 1 column, the easier way to place black div below the green is to create another blank div
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12" style="height:300px;"></div>
<div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
</div>
</div>

Answer 2

Bootstrap 4 is mobile first. So first thing is invert the order of your classes.
The problem is that you are setting the width of your boxes to be the half of the width of the row on desktop, and rows are set to wrap by default in bootstrap.
Set the columns to full width with col-12.
<div class="container-fluid">
<div class="row">
<div class="col-12" style="background-color:blue; height:600px;"></div>
<div class="col-12 " style="background-color:green; height:300px;"></div>
<div class="col-12" style="background-color:black; height:300px;"></div>
</div>
</div>
EDIT:
If you want the columns to be half of the width of the row and still prevent wrapping, you have to add an offset:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
</div>
</div>

Answer 3

You can nest the blue and green column in another column.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 ">
<div style="background-color:green; height:300px;"></div>
<div style="background-color:black; height:300px;"></div>
</div>
</div>
This way the green and black column are contained inside the "right" side. The other answers are working too but they are changing the bootstrap grid behaviour or splitting up the content, which I don't think is ideal.

Answer 4

Bootstrap 4 uses Flexbox so columns aren't going to "float" next to each other as they did in Bootstrap 3. You can override this behavior by enabling floats on lg and up screen widths.
Notice use of the d-lg-block and float-left classes.
<div class="container-fluid">
<div class="row d-lg-block">
<div class="col-lg-6 col-md-12 float-left" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 float-left" style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12 float-left" style="background-color:black; height:300px;"></div>
</div>
</div>
https://www.codeply.com/go/7KLlzbAGGU
Also see: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4