CSS: Arrange a list in multiple rows and columns

Question

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?

Answer 1

You can do this with Flexbox using flex-direction: column and flex-wrap: wrap, here is Fiddle

Update: This is not great solution because you have to use fixed height on parent element also if your content overflows one of li it will break layout as you can see here Fiddle but it could be useful in some cases.

body, html {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

ul {
  height: 100vh;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  width: 50%;
}

li:nth-child(1) {
  background: #000000;
  flex: 0 0 33.33%;
}

li:nth-child(2) {
  background: #30BB75;
  flex: 0 0 33.33%;
}

li:nth-child(3) {
  background: #BB3047;
  flex: 0 0 33.33%;
}

li:nth-child(4) {
  flex: 0 0 100%;
  background: #305EBB;
}

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