下面是代码示例...这些卡是垂直订购的，不确定如何水平订购或显示它们...
我正在尝试从数据库中获取数据（数据将根据日期排序），并希望在第一行而不是第一列显示最新的帖子
任何帮助将不胜感激
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</head>
<style>
.cards-container {
column-break-inside: avoid;
}
.cards-container .card {
display: inline-block;
overflow: visible;
}
@media only screen and (min-width: 993px) {
.cards-container {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col s12 cards-container">
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 1</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 2</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 3</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum ea, magni repellat corporis ab voluptates cumque aut quisquam exercitationem obcaecati itaque voluptatem, laborum saepe, eveniet eos doloremque atque! Cum.</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 4</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 5</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!</p>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="card-title">Card Title</span>
<a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
</div>
<div class="card-content">
<p>Test Card 6</p>
<br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi deleniti sequi placeat ab molestias laborum error provident enim pariatur animi quos harum laudantium rerum veniam quisquam, eius nostrum molestiae facilis!</p>
</div>
</div>
</div>
</div>
</body>
</html>