I've a really bad bootstrap issue. I googled hours and days to find a solution for this issue but nothing out there. I have a page with 3 rows and each row with 3 columns in col-md- I've set each column to col-md-4 in col-sm I've set it to col-sm-6 and in col-xs- I've set it to col-xs-6. When I resize the page to sm or xs I end up for each row with 2 columns and a single column in a new row. The same thing happens for the next rows. I know that the problem is that I've used 3 different rows and it's difficult to merge the rows because they are calculated as separate parts by bootstrap. But I've no other choice and have to find a solution for this problem. Please help me and I'll be very thankful.
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c1">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c2">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c3">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c4">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c5">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
another text
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c6">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c7">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c8">
<p class="port-desc" style="">
asdfasdfasdf<br>
http://www.asdfasfd.com
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 portcols">
<div class="port-container c9">
<p class="port-desc" style="">
<span style="font-size: 24px;">asdfasdfasdf</span> <br>
http://www.asdfasfd.com
</p>
</div>
</div>
</div>
</div>
The first image is my page in md size and the second is my page in sm size
