Html 创建交错布局

我多么想要它：

所附的代码是第一小节，运行良好。我正在努力让它像我所附的照片（目标）中那样翻转它

请帮忙

。左小节{
显示器：flex；
}
.剩余部分内容{
文本对齐：左对齐；
左侧填充：10px；
}
.开始格式左img{
填充：50px 0 50px；
宽度：350px；
高度：500px；
}
.开始格式左h3{
填充：50px；
左侧填充：0px；
文本对齐：左对齐；
边缘底部：-50px；
}
.开始格式左p{
最大宽度：600px；
}

呜呜呜呜
呜呜呜呜

呜呜呜呜

呜呜呜呜

对于右侧框，您可以在每x个孩子身上使用

弹性方向：行反转

：

。左小节{
显示器：flex；
弯曲方向：行；
宽度：100%
}
.左小节：第n个孩子（偶数）{
显示器：flex；
弯曲方向：行反向；
}

---

这些行中有什么吗？

我不确定，我对web开发非常陌生。您能在我的代码中实现它吗？谢谢：）这应该行得通它可能不适用于您的原因是，您只需要复制subsection div，而不需要在添加新div时复制父div）在沙盒代码中，我稍微更改了名称以避免混淆