HTML & CSS: Bootstrap columns - html

Question

I'm trying to create a grid system but I can't figure how to put the columns. To be more clear, I want the horizontal cards to be one under another without being divided. I tried changing the orded of the blocks but didn't seem to work at all. I'm using Bootstrap 4.
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="card">
<div class="card-header card-header-text card-header-warning">
<div class="card-text">
Welcome back, <b><?php echo $display_name; ?></b>!
</div>
</div>
<div class="card-body">
<h4 class="card-title">Info</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc..
</p>
<footer class="blockquote-footer">Lorem</footer>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header card-header-text card-header-danger">
<div class="card-text">
<h4 class="card-title">News</h4>
</div>
</div>
<?php
while($row = $stmtNews->fetch(PDO::FETCH_ASSOC)){
$row['date'] = date('j M', strtotime($row['date']));
?>
<div class="card-body" style="max-height: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<?php echo $row['news']; ?>
<div class="card-footer">
<div class="card-text">
<small class="text-time"><?php echo $row['date']; ?></em></small>
</div>
</div>
</div>
<div class="dropdown-divider" style="margin: 15px;"></div>
<?php
}
?>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="card">
<div class="card-header card-header-text card-header-warning">
<div class="card-text">
Welcome back, <b><?php echo $display_name; ?></b>!
</div>
</div>
<div class="card-body">
<h4 class="card-title">Info</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras odio dui, sodales vitae fringilla quis, porta in nunc...
</p>
<footer class="blockquote-footer">Lorem</footer>
</div>
</div>
</div>
</div>

Answer 1

I don't know exactly what you want to achieve, but maybe this approach could help you:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-sm-12">
Level 2: .col-12
</div>
<div class="col-sm-12">
Level 2: .col-12
</div>
</div>
</div>
<div class="col-sm-2">
Level 1: .col-sm-2
<div class="row">
<div class="col-sm-12">
Level 2: .col-12 with defined or dynamic height
</div>
</div>
</div>
</div>
It results in this grid:
It may not be the best idea, but it may be a first approach to solve your problem.