Как выровнять элементы списка в определенном порядке

Question

Это простая проблема, но я, кажется, застрял. Я пытаюсь выровнять элементы списка по определенному заказу, ограниченному только высотой их родителя.

Пример: JSBin

Так что я пытаюсь изменить порядок элементов идти вертикально, а не горизонтально - Теперь порядок:

1 2 

3 

Я пытаюсь изменить его :

1 3 

2 

Трюк заключается в том, чтобы сделать это без использования JavaScript или CSS3 (он должен быть совместим с более старыми браузерами).

Answer 1

Отлично. Нет JavaScript и CSS3? Это может быть легко достигнуто с использованием:

• Flexbox
• Колонны

Я могу дать вам пример как:

.example-list { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 120px; 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    -o-column-count: 2; 
 
    column-count: 2; 
 
} 
 

 
.example-list li { 
 
    display: inline-block; 
 
    background: red; 
 
    padding: 20px; 
 
    margin: 5px; 
 
    color: #FFF; 
 
    float: left 
 
}

<ul class="example-list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
</ul>

Preview:

Для более элементов: