html - Bootstrap card not formatting correctly on mobile -

i using 'cards' bootstrap. see quote, known , contact information gets pushed way out , can see without scrolling pictured below;

and more downsized use on mobile device show small avatar icon push quote , information right not down

here fullsized preview:

here card block code:

<div class="container">         </br>         <div class="card" style="box-shadow: 2px 2px 1px grey;">           <div class="card-header bg-dark">             <h6 style="color:#fff; text-shadow: 1px 2px 1px rgba(0,0,0,0.3);"><?php echo $row['job_description'];?><small style="font-size:16px;"> - relation</small></h6>         </div>         <div class="card-body">             <div class="media">                 <!-- card -->                 <div class="media-left">                     <div class="card" style="width: 16rem;">                       <img class="card-img-top img-thumbnail" src="<?php echo $row['image'];?>" alt="avatar image" style="height: 100; width: 100;">                       <div class="card-body">                         <h4 class="card-title"><?php echo $row['name'];?></h4>                             <div class="card">                                 <div class="card-block" style="padding: 3px;">                                     <p class="card-text" style="font-size: 12px;"><?php echo $row['summary'];?></p>                                 </div>                             </div>                       </div>                     </div>                 </div>                 <div style="padding-left:10px;"> </div>                 <div class="media-body">                     <p class="card-text">                         <div class="blockquote1 rounded">                             <p><?php echo $row['personal_reference'];?></p>                         </div>                                           </p>                     <div class="card">                         <div class="card-text">                         <ul class="list-group list-group-flush">                               <li class="list-group-item">                               <h4 class="card-title" style="font-size:12px;">known for</h4>                               <?php $tags = explode(",",$row['tags']);?>                               <?php foreach ($tags &$value) { ?>                                 <p class="rounded bg-success" style="background-color: #b62abf; display:inline-block; padding: 2px; color:#fff; font-size:12px;"><?php echo $value; ?></p>                               <?php } ?>                               </li>                           </ul>                           <div class="card-body card-header">                               <h4 class="card-title" style="font-size:12px;">contact</h4>                               <?php $contact = explode(",",$row['contact']);?>                               <?php foreach ($contact &$value) {?>                                 <p class="rounded bg-info" style="background-color:#000; display:inline-block; padding: 2px; color:#fff; font-size:12px;"><?php echo $value; ?></p>                               <?php } ?>                           </div>                           </div>                     </div>                 </div>             </div>         </div>             </div>     </div>