12 images in a row, responsive, bootstrap

[Simon_4]

On this page I have 12 images, so far okay. But I like to make them more responsive.

https://www.outdoorequipped.com/

The code I use is follow and I know I am missing something, but I am not sure what.

Also, how I can do, that this div, where all those 12 images are, has a "auto hight?

<div class="row" style="height: 60px;">
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/asics.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/asics-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/puma.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/puma-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/active/brands/speedo.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/speedo-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/fjallraven.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/fjallraven-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/marmot.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/marmot-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/outdoor/brands/woolrich.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/woolrich-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/giorgo-brutini.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/giorgobrutini-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/kenneth-cole.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/kennethcole-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/fashion/brands/dr-martens.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/drmartens-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="featured-brands">
<div class="row">
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/caterpillar.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/caterpillar-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/sanita.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/sanita-logo-60.png" /> </a></div>
</div>
<div class="col-sm-4 col-xs-4">
<div class="element-content brand"><a href="https://www.outdoorequipped.com/work/brands/wrangler.html"> <img class="imagesize" alt="" src="https://www.outdoorequipped.com/media/wysiwyg/four_cats/logos/wrangler-logo-60.png" /> </a></div>
</div>
</div>
</div>
</div>
</div>

[diafol]

The 'responsiveness' of the images in this setup are down to the columns you stipulate wrt grid (12 cols). Not sure exactly what you're after. BS has other breakpoints such as 'md' and 'lg'. But nothing stopping you creating additional custom breakpoints.

Also, how I can do, that this div, where all those 12 images are, has a "auto hight?

Sorry, I don't understand. Do you want to force images to a particular height? Scaled x,y? Please expand.

[pritaeas]

Are you perhaps looking for a masonry layout?

http://www.bootply.com/tagged/masonry