Edit in JSFiddle

<div class="container">
  <div class="row">
    <div class="col-12 col-md-12 pull-md-3 bd-content">
      <div class="bd-example">
        <div class="d-flex bd-highlight mb-3" style="height: 100px">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="align-self-start p-2 bd-highlight">Aligned flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex bd-highlight mb-3" style="height: 100px">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="align-self-end p-2 bd-highlight">Aligned flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex bd-highlight mb-3" style="height: 100px">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="align-self-center p-2 bd-highlight">Aligned flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex bd-highlight mb-3" style="height: 100px">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="align-self-baseline p-2 bd-highlight">Aligned flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex bd-highlight mb-3" style="height: 100px">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="align-self-stretch p-2 bd-highlight">Aligned flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>

        <div class="d-flex justify-content-start bd-highlight mb-3">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex justify-content-end bd-highlight mb-3">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex justify-content-center bd-highlight mb-3">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>
        <div class="d-flex justify-content-between bd-highlight mb-3">
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
          <div class="p-2 bd-highlight">Flex item</div>
        </div>


      </div>
    </div>
  </div>
</div>

.bd-example {
  background-color: #ccc;
}

.p-2 {
  background-color: grey;
  color: white;
}

body .mb-3 {
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}