Bootstrap 4 flexbox columns and ordering

Alternating Icons when in mobile view and desktop. From small to large and side to side, using flexbox columns and order classes.

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<article class="article-grid">
  <div class="row">
    <div class="col-9 col-sm-6 col-md-7 col-lg-6 offset-sm-1 offset-lg-2 order-2 order-sm-1 text-sm-right" id="over-ons-column-1">
      <p>Every entrepreneur starts small, but nobody becomes an entrepreneur to stay small.</p>
      <p>You work hard on your business and it soon gets bigger.</p>
      <p>But, despite all your hard work, your growth seems to be stagnating. This is an important turning point in every company.</p>
      <p>What now?</p>
    </div>
    <div class="col-9 col-sm-6 col-md-7 col-lg-6 order-4" id="over-ons-column-4">
      <p>You can now do two things:</p>
      <p>1) haphazardly continue to work hard and hope that enough people will find your company of their own, or</p>
      <p>2) find out in detail who your target group is, what they are looking for and approach them efficiently.</p>
    </div>
    <div class="col-9 col-sm-6 col-md-7 col-lg-6 offset-sm-1 offset-lg-2 order-6 order-sm-5 text-sm-right" id="over-ons-column-5">
      <p>The latter is what Portrayal specializes in.<br />As an entrepreneur you want to be findable online and reach the right people to continue growing. Often, time, resources or knowledge are lacking to keep track of this yourself.</p>
      <p>We believe that starting entrepreneurs and start-ups deserve a chance to grow.</p>
    </div>
    <div class="col-3 col-sm-4 col-md-3 col-lg-2 order-1 order-sm-2" id="over-ons-column-2"><img class="img-fluid" src="https://portrayalmarketing.com/assets/img/Over-Ons-Werk.png"...

CSS

@media (min-width: 576px) {
  .article-grid [id^=over]:not(:nth-child(3)):not(:last-of-type) {
    margin-bottom: 4vw
  }
}