Q:

How to use flexbox to show most recent posts first?

I am using Jekyll to set up a website, and I am using a flexbox model where viewers can click on a post and it will take them to the article page. The problem is that my grid is set up to show 3 posts per row, then wrap. By default, the first published post is the first post you see, and the newest posts end up at the end, so I am trying to use flexbox to reverse this.
If I have only 7 posts on the site, the last post will be on a line of its own, with two empty spaces, so if I use 'wrap-reverse', that post will be the only post on the top row, which isn't what I want. I would like for my posts to show up as: [7,6,5 - 4,3,2 - 1] from left to right, instead of the defaulted [1,2,3 - 4,5,6 - 7], where 7 is the newest article and 1 is the oldest. 
I am looking for a possible method to arrange my posts in a clean fashion, so that as I upload new posts, they automatically publish in the top left of the grid layout. Sorry if this may sound confusing. If you have any questions that will help to understand what I am talking about please feel free to ask.
Here is some code from codepen that illustrates what I have. 
http://codepen.io/pen/?editors=110
<body>
  <div class="container">
    <div class='post'>1 (oldest post)</div>
    <div class='post'>2</div>
    <div class='post'>3</div>
    <div class='post'>4</div>
    <div class='post'>5</div>
    <div class='post'>6</div>
    <div class='post'>7 (newest post)</div>
  </div>
</body>

.container {
  display: flex;
  flex-wrap: wrap;
}

.post {
  height: 170px;
  width: 220px;
  background: black;
  color: orange;
  margin: 10px; 
  font-size: 24px;
  text-align: center;
}

I basically want 7 to replace 1, 6 to replace 2, 5 to replace 3, etc. 
Thanks for your help!

A:

To reverse an array with Jekyll you just can reverse this array order, which, by default, is sorted by date :
<div class="container">
{% for post in site.posts reversed %}
  <div class='post'>{{post.title}}</div>
{% endfor %}
</div>

