Flexbox 2/1/2 макет детей

Question

Я пытаюсь сделать 2 1 2 гибкую схему, как показано в моем предыдущем вопросе; Flexbox/Float - 2 1 2 Layout.

Макет в ответе работает, но он заставляет детей стать гибкими, и я пытаюсь это исправить.

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

.mustReadImage img { 
    width: 334px; 
    height: 222px; 
    display: block; 
}/*Image*/ 
.mustReadN { 
    flex: 0 0 50%; 
    display: flex; 
    width: 334px; 
}/*li*/ 

.mustReadN:nth-child(3) { 
    flex: 0 0 100%; 
}/*Big li*/ 

.mustReadN:nth-child(3) img { 
    width: 670px; 
    height: 680px; 
}/*Big Li Image*/ 
.mustReadGroup { 
    display: flex; 
    height: 670px; 
    list-style-type: none; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 0; 
    padding: 0; 
    width: 74%; 
    margin-left: auto; 
    margin-right: auto; 
}/*Ul*/ 

У ли детей есть также.

Редактировать 1; Это должно стать чем-то вроде этого.

Answer 1

Это скрипку из @NenadVracar был ответ!

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

* { 
    box-sizing: border-box; 
} 

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

li { 
    flex: 0 0 50%; 
    border: 1px solid black; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
} 

li:nth-child(3) { 
    flex: 0 0 100%; 
} 

p { 
    margin: 0; 
} 

flex-direction: column; исправил это для меня.