Can I change the order of these columns in CSS?

Question

I have multiple lists of data, made up of unordered lists in HTML and I'm trying to get them to display in 2 columns.

I've got them appearing as 'columns' but I can't get the columns to display how I want them to.

If you look at the below snippet you can see that the columns are aligned in 2 columns, but I'd like the columns to be sequential, so A, B, C, D in the left column and D, E, F etc in the right column.

I've used Flexbox and have been messing around with flex-direction but to no avail. Any tips? What am I doing wrong? Also, here's a Fiddle.

ul {
  display: flex;
  width: 500px;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

I know that this is something silly and trivial but what am I missing? I'm using Sass too.

Do you really need to have your `li`s ordered in your HTML? If so, you still can use CSS parity rules: `ul:nth-child(even) { /* even rows */ }` / `ul:nth-child(odd) { /* odd rows */ }` — Kaddath, Jan 29 '18 at 14:49
@Kaddath the data that I'm showing is in alphabetical order and it's a requirement to have them ordered like this. — zik, Jan 29 '18 at 14:50

score 1 · Answer 1 · answered Jan 29 '18 at 14:50

There is a problem with display : flex in IE, i suggest you use this code will work with every browser:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

score 1 · Answer 2 · answered Jan 29 '18 at 14:53

You aren't displaying them in columns, you are displaying them in rows that wrap.

If you need a column format in flexbox you need to use flex-direction:column AND set a height so that the flexbox knows when to wrap.

ul {
  display: flex;
  width: 500px;
  flex-direction: column;
  flex-wrap: wrap;
  height: 5em;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

score 1 · Accepted Answer · answered Jan 29 '18 at 14:55

It's not possible to do this without setting the height of the element, which you may not want to do.

You can, however, use column-count to set a number of columns and it will make each column contain around the same number of items.

ul {
  column-count: 2;
  column-gap: 35px;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

score 0 · Answer 4 · answered Jan 29 '18 at 14:54

You have to add flex-direction: column; for that. But you also have to set a fixed height in that case.

ul {
  display: flex;
  width: 500px;
  height: 80px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

hungerstar · Answer 5 · 2018-01-29T15:06:14.193

Use flex-direction: column; and a height on the ul. This way the flex items are arranged top down instead of left to right (a row). The height makes sure the column wraps. Which is required if you want to use flexbox to do this.

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 75px;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

score 0 · Answer 6 · answered Jan 29 '18 at 15:09

You could use grid and grid-auto-flow so you set the auto-placement to column, check the following snippet:

ul {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(2, 125px);
  grid-auto-flow: column;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

Can I change the order of these columns in CSS?

6 Answers6