what can i do to stay a dynamic list? - html

Question

i was making a page of products and i'm having some difficulty, the text makes the box bigger and then disturbs the rest and looks just like the picture. I thank anyone who can help, as long as loyate remains responsive, that aligns according to the resolution.
thanks
normal
decreases resolution and changes position
<section class="col-xs-10 col-xs-offset-1 boxContent destaques">
<div class="col-xs-12">
#foreach ( $produtos as $produto )
<div class="col-xs-12 col-sm-4 col-md-3 boxProduto">
<!--<a href="{{ route('produto', $produto->id_produto) }}">-->
<a href="{{ route('produto', $produto->id_produto) }}">
<div class="col-xs-12 imgProd ">
<img src="{{ $produto->url_imagem }}" class="img-responsive" >
</div>
</a>
<span style=" overflow-wrap: break-word;
padding: 15px;
word-wrap: break-word;
margin: center;">
{{ $produto->nome }}
</span>
<div class="col-md-12 preco">
<p>{{ $produto->pvp }}€</p>
</div>
<div class="col-xs-12 detalhes">
DETALHES
</div></div>
</div>
#endforeach
<!--</a>-->
</section>
<style>
.boxProduto {
padding: 0px !important;
margin: 10px 1%;
border: 1px solid #ccc;
border-radius: 2px ;display: block;
text-align: center;
}
.destaques {
h1 {
width: 60%;
}
.hr {
width: 21%;
}
.boxContent {
padding: 15px 25px !important;
margin-bottom: 15px;
background: white;
box-shadow: 0px 0px 11px #ddd;
width: 100%;
float: left;
margin-bottom: 0px;
text-align: center;}
</style>