Bootstrap-Gitterelemente werden in der nächsten Zeile falsch ausgerichtet

Question

Ich verwende das Bootstrap-Grid, um eine Seite mit Produkten anzuzeigen, die dynamisch hinzugefügt werden. Jedes Produkt hat eine col-md-3 Klasse und es gibt 4 Produkte pro Zeile. Das Problem ist, dass, wenn die Zeile voll ist und ein neues Produkt hinzugefügt wird (und daher eine neue Zeile beginnen muss), das Produkt nicht am Anfang der neuen Zeile platziert wird, sondern irgendwo anders (entweder zweite oder dritte Position). Sie können [sehen hier einen Screenshot] [1] das Problem zeigen.

Answer 1

<div class= "row"> 
    <div class="col-xs-6 col-md-3"> 

    <a href="/collections/summer-collection/products/another-skirt" class="grid__image"> 
    <div class="my-reveal"> 
    <img src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0345_123483_large.jpg?v=1486835408" alt="Another Skirt"> 
    <img class="hidden" src="//cdn.shopify.com/s/files/1/1698/6183/products/DSC_0353_123483_large.jpg?v=1486835408" alt="Another Skirt"> 
    </div> 
    </a> 

    <p class="h4 front-title"> 
    <a href="/collections/summer-collection/products/another-skirt">Another Skirt</a> 
    </p> 
    <p> 
    <span class="visually-hidden">Regular price</span> 
    <br><s>440,00 lei</s> 
    </p> 

    </div> 
</div>