Столбцы начальной загрузки не выравнивают свойства в Chrome (как в Firefox).Что я делаю неправильно?

Question

Я пытаюсь показать два типа контента в одной строке.Я использую Bootstrap 4.0.

Я делю строку на два столбца: первый должен иметь три столбца карты в широких мониторах, а остальные должны быть заняты вторым столбцом содержимого.

Я начал с:

<main role="main" class="container-fluid">
  ...
<div class="row">
<div class="col col-9">
        <div class="card-columns">

              [this stuff is inside a php foreach() loop]
              <div class="card">
              <div class="card-header">Título del artículo</div>       
              <div class="card-body">
              [content]
              </div>
              [end foreach]
        </div>
</div>
<div class="col col-3">
[content]
</div>
</div>

</main>

Но Firefox показал мне три столбца карточных столбцов и последний столбец внизу.

Итак, я попытался:

<div class="row">
<div class="col">
        <div class="card-columns">
[content]
        </div>
</div>
<div class="col col-3">
[content]
</div>
</div>

И теперь Firefox показывает мне ожидаемый результат, но не Chrome.

Я должен добавить, что у меня всегда один и тот же неправильный результат в Chrome.

Я прикрепляюкартина того, что я имею в виду.

Что я делаю не так?Спасибо!