Responsive columns pages

I have built 2 equally nice bootstrap pages one with a table & one with  divs  neither is responsive

Haven't a clue how to fix either I would like to learn the div ones and stay away from the tables if possible.

But would be very happy with anything that really works as a responsive solution.

http://corraldetierrarealty.com/Listing1.php      < divs

<div class="jumbotron" style="padding-top: 18px;">

<div class="row">

<div class="col-xs-6">
<?php foreach ($listingsRecords as $record): ?>

<h3 align="center"><font color="#800000"><?php echo $record['status'] ?></font><br>
<a href="<?php echo $record['_link'] ?>"> <?php echo htmlencode($record['address']) ?></a><br/>
<font size="3">
<?php echo $record['bedroom'] ?> Beds <?php echo $record['bath'] ?> Baths | Sq Ft: <?php echo htmlencode($record['approximate_square_footage']) ?>
<br>
</font>
<?php foreach ($record['photos'] as $index => $upload): ?>
<a href="<?php echo $record['_link'] ?>"> <img src="<?php echo htmlencode($upload['thumbUrlPath3']) ?>" width="400" height="268" alt="" /></a>
<?php break; ?>
<?php endforeach ?>
<br/>
<?php echo htmlencode($record['price']) ?>
<br/> <font size="3">Email: <a href="mailto:<?php echo $record['email'] ?>"><?php echo join(', ', $record['agent:values']); ?></a></font>

<?php $maxCols=2; if (@++$count % $maxCols == 0): ?> </div> <div class="col-xs-6">

<?php endif; ?>
<?php endforeach ?> </div>

</div></div>

the attached listing.php page is the table page