Bootstrap use of columns - Custom

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <!-- Duplicate from here to how many columns you needs -->
    <!-- 50% Column -->
    <div class="col-sm-6 center-content">
      <!-- 33% Column -->
      <div class="col-xs-4 no-padding">
        <p>Cras mattis consectetur purus.</p>
      </div>
      <!-- 33% Column -->
      <div class="col-xs-4 center-content no-padding">
        <img src="http://www.pngmart.com/files/3/Right-Arrow-PNG-Image.png" />
      </div>
      <!-- 33% Column -->
      <div class="col-xs-4 no-padding">
        <p>Cras mattis consectetur purus sit amet fermentum.</p>
      </div>
    </div>
    <!-- 50% Column -->
    <div class="col-sm-6 center-content">
      <!-- 33% Column -->
       <div class="col-xs-4 no-padding">
        <p>Cras mattis consectetur purus sit amet fermentum.</p>
      </div>
      <!-- 33% Column -->
      <div class="col-xs-4 center-content no-padding">
        <img src="http://www.pngmart.com/files/3/Right-Arrow-PNG-Image.png" />
      </div>
      <!-- 33% Column -->
      <div class="col-xs-4 no-padding">
        <p>Cras mattis consectetur.</p>
      </div>
    </div>
    <!-- END OF DUPLICATE -->
  </div>
</div>

CSS

/* Constraint to arrow iamge size */
.center-content img {
  max-width: 100%;
  height: auto;
  max-height: 60px;
}

/* Centers content vertically so even if the content on one column is bigger than the other, everything will still look centered */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Removes padding from smaller columns */
.no-padding {
  padding: 0;
}

/* OPTIONAL - Adds margin between rows on mobile sizes */
@media screen and (max-width: 639px) {
  .col-sm-6 {
    margin-top: 15px;
  }
}