Bootstrap nested layout (2 columns in one column) - html

Question

I am trying to layout a grid in bootstrap that consists on the desktop of a full 12 column layout, inside that, there is a 8 column grid and a 4 column grid. the 8 column grid is filled with an image/text, the 4 column grid consists in its own of 2 elements below each other containting image/text.
on smaller breakpoint the layout should simply show 3 elements in same size below each other.
I fiddled around but I do not get it to work. Below you also find next to the html a sketch from what I am trying to achieve. Any hints? I do not feel this is possible out of the box with bootstrap 4.
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</section>
As a sketch it looks like this:

Answer 1

You need to specify the smaller col width. You also had an extra unnecessary row and col wrapping it. Below is a working example of what you are looking for. col-12 class was added for any screen smaller than md
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>

Answer 2

Please try this snippet.
.row {
margin: 20px 0;
}
.col .card {
height: calc(100% - 10px);
}
.card{
margin-bottom: 10px;
}
.card img {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-sm">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
</div>
</div>