Смещение загрузочной сетки влево

Question

У меня есть простая схема начальной загрузки.Мне нужно создать пространство между столбцами, поэтому я использовал несколько классов смещения.Есть только один вызов.Мне нужен первый ряд, который будет слева (без пробела слева), а второй столбец посередине первого и последнего, так что все они будут хорошо выровнены.

Как это возможно всамонастройки?Я пытался использовать систему смещения, но я не могу заставить ее работать.

Это то, что я пробовал до сих пор:

<div class="row posts">
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 1</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 2</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
      <div class="col-lg-3 offset-lg-1 post">
        <span class="post-title block">headline col 3</span>
        <span class="post-content block">content</span>
        <a class="read-more block" href="">Read more</a>
      </div>
    </div>
  </div>

Проверьте эту скрипку: https://jsfiddle.net/7a8tz591/

Выше приведен следующий результат, я хотел бы, как объяснено здесь:

Answer 1

Используя boostrap flex box, это возможно:

<div class="wrapper">
<div class="container">
  <div class="row posts  d-flex justify-content-between">
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 1</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 2</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
    <div class="col-lg-3 post">
      <span class="post-title block">headline col 3</span>
      <span class="post-content block">content</span>
      <a class="read-more block" href="">Read more</a>
    </div>
  </div>
</div>

Я удалил класс offset-lg-1 из каждого из блоков div.