Can't figure out why bootstrap column won't collapse - html

Question

I've made a grid of 6 using two rows with columns and was trying to make it so when the screen resizes from large to small it rearranges from 3 to 2 to 1. But I can't seem to make that work, I could have sworn the last time I used bootstrap to do this it was working. What happens is as the screen resizes, the profiles start to overlap over each other. What I have tried to do is add a css line for each resolution and increase the width percentage which seems to work, but I feel like it's not a clean approach.
here is the code:
<!-- Spotlight -->
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Xanthe</h3>
<p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of her
cousin who is battling leukemia.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Team Gary</h3>
<p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Brevitas Consulting</h3>
<p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Irudaya</h3>
<p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing work!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Maureen Parent</h3>
<p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Spotlight -->
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Xanthe</h3>
<p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of
her cousin who is battling leukemia.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Team Gary</h3>
<p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Brevitas Consulting</h3>
<p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Irudaya</h3>
<p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing
work!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Maureen Parent</h3>
<p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to give you a better idea of what's happening here's a screenshot of when the screen reaches 991px
Any suggestion is greatly appreciated! thanks for your time
Update
Restructured the HTML according to W3S, still gives me the same overlapping issue.
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/xanthe.jpg">
<h3>Xanthe</h3>
<p> </p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/TeamGary.jpg">
<h3>Team Gary</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/Johnny.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/Brevitas.jpg">
<h3>Brevitas Consulting</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/irudaya.jpg">
<h3>Irudaya</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/MaureenParent.jpg">
<h3>Maureen Parent</h3>
<p></p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

The images are the problem here. Add class="img-responsive" to the image tag and it should fix it for you. At a certain width, the image size gets bigger than the column width and hence it overlaps.