Каменная кладка по вертикали не горизонтальная

Question

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

дисплей: сгибать

ведет себя с другими сгибают свойствами.

Это layout я хотел бы достичь

скрипку here

HTML:

<div id="masonry"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"> 
</div> 

CSS:

body { 
    margin: 0; background: #131212; 
    width: 100vw 
} 
div#masonry { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 100vw; 
    font-size: 0; 
} 
div#masonry img { 
    width: 50%; 
    transition: .8s opacity; 
} 

div#masonry:hover img { opacity: 0.3; } 
div#masonry:hover img:hover { opacity: 1; } 

Answer 1

->some guide<-
flex-direction: row | row-reverse | column | column-reverse;
в: ДИВ # кладка IMG - вы можете играть с шириной и/или высотой также, надеюсь, что помогает :)