Below is the code sample... the cards are ordered vertically and not sure how to order or display them horizontally...
I am trying to get the data from a database (data will be ordered based on date) and want to display the latest posts on the top row, not the first column
any help would be appreciated
<!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>
