https://i.sstatic.net/eFfgY.png Looking for a way to properly position blocks using bootstrap4 based on screen size. When the screen is larger, all blocks should be in a row. However, when the screen size is reduced to medium, the rightmost block should move below the first one. I have tried using the d-none class and it works but it requires repeating the code. Is there a better way to achieve this layout? Thank you!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters">
<div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red; height: 60px">
<p>Bread Crump</p>
<p>Bread Crump</p>
<div class="d-none d-md-block d-lg-none mt-2" style="background-color: pink; height: 100px">
<p>List</p>
<p>List</p>
<p>List</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
<p>Name</p>
<p>Name</p>
<p>Name</p>
<p>Name</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 d-md-none d-lg-block" style="background-color: pink; height: 100px">
<p>List</p>
<p>List</p>
<p>List</p>
</div>
</div>