砌体与CSS错位

Question

我尝试用3列进行砌体对齐。但是，第一列有时会转到第二列。你能帮忙解释一下吗？

SCSS代码：

.masonry { /* Masonry container */
    column-count: 3;
    column-gap: 1em;

    @media(max-width: 768px){
        column-count: 2;
    }
    @media(max-width: 480px){
        column-count: 1;
    }
    .uk-card { // Masonry bricks or child elements                        
        margin: 0 0 1em;            
    }
}

您可以在此处查看砌体测试：https://jsfiddle.net/nnx8fzL2/1/

何时将屏幕调整到一定宽度，第一列将覆盖第二列。