HTML & CSS: Bootstrap столбцы

Question

Я пытаюсь создать систему сетки, но не могу понять, как разместить столбцы. Чтобы быть более понятным, я хочу, чтобы горизонтальные карты находились одна под другой без разделения. Я пытался изменить порядок блоков, но, похоже, не работал вообще. Я использую 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

Я не знаю точно, чего вы хотите достичь, но, возможно, этот подход мог бы вам помочь:

      <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>

В результате получается эта сетка:

Возможно, это не лучшая идея, но это может быть первый подход к решению вашей проблемы.