Those css of timeline:

.timeline-icon {
  position: absolute;
  right: -16px;
  top: 17px;
}

.icon-shadow {
  text-shadow: 6px 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-icon-inverted {
  position: absolute;
  left: -16px;
  top: 17px;
}

Should be instead:

.timeline-icon {
  position: absolute;
  right: -15px;
  top: 17px;
}

.icon-shadow {
  text-shadow: 6px 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-icon-inverted {
  position: absolute;
  left: -15px;
  top: 17px;
}

Because if you remove the box-shadow of it and keep a strong black border you'll see a gap between the border and the arrow icon. This little change fix that gap.

Btw, would be awesome if we could change the order of elements.

For example, let say I want to have: Title > Text > Time. Right now the default design is: Title > Time > Text.

With flex, I could use the column-reverse

But I would need a way to pass through the classes:

The code for the flex would be like this for example:

<div class="d-flex flex-column-reverse"><p class="text-muted mt-3">
            <i class="far fa-clock" aria-hidden="true"></i> 11 hours ago via
            Twitter
          </p>
          <p class="mb-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p></div>