CSS: Arrange a list in multiple rows and columns

I have an simple ordered list inside my template file, which I can't change.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Is there a way to order my content like so: two columns, the last item will always be on the second column.

I tried flex, but I couldn't find a way to break the flow after the third item. Is there a way to do this via CSS or will I have to resort to hacking it with jQuery?