Bootstrap Media Objects

<div class="container-fluid mt-3">
  <div class="media border p-3">
    <img src="https://www.closetag.com/images/avatar1.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>Mohamed Adly <small><i>Posted on February 27, 2014</i></small></h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>      
    </div>
  </div>
</div>

<div class="media border p-3">
  <div class="media-body">
    <h4>Mohamed Adly  <small><i>Posted on February 29, 2014</i></small></h4>
    <p>Lorem ipsum...</p>
  </div>
  <img src="images/avatar1.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>

<!-- Media top -->
<div class="media">
  <img src="avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media middle -->
<div class="media">
  <img src="avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- Media bottom -->
<div class="media">
  <img src="avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>