Flexbox 2/1/2布局儿童

Question

我正在尝试制作一个2 1 2 flexbox布局，如上一个问题所示; 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;为我修好了。