<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class="purchase overflow-auto">
<header>
<div class="row">
<div class="col-sm-3 col-xs-3">
<img src="https://www.qbrobotics.com/wp-content/uploads/2018/03/sample-logo-490x200.png" class="img-responsive">
</div>
<div class="col-sm-9 col-xs-9 company-details">
<div>company address, city, postal</div>
<div>company phone +0987654</div>
<div>company fax +098765</div>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col-sm-3 col-xs-3 to-details">
<div>PURCHASED ORDER FOR :</div>
<div class="to-name">Company A</div>
<div class="to-address">Company A Address</div>
<div class="to-city">City, Postal</div>
</div>
<div class="col-sm-9 col-xs-9 purchase-info">
<h4 class="info-code">PO/1212/121212</h4>
<div class="info-date">Issued : 23-Dec-2018</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 table-responsive">
<table class="table table-condensed" border="0" cellspacing="0" cellpadding="0" width="100%">
<thead>
