更改overflow-y上的浮动显示顺序

Question

有人可以告诉我如何订购下面的列（jsbin starter），以便随着屏幕变小，始终显示最后一列，首先隐藏第一列，然后隐藏第二列，等等。 。？ （如果有办法不使用理想的媒体查询。）

HTML

<nav>1st column</nav>
<main>
  <article>2nd column</article>
  <article>3rd column</article>
  <article>4th column</article>
</main>