Flex в css, как разместить элементы друг под другом?

В общем как разместить элементы так? Спасибо

Если при уменьшении ширины экрана воспользоваться "flex-wrap: wrap;"
то третья карточка будет в левой части экрана. Flex свойство, которое дает возможность разместить карточки таким образом без изменения HTML чет я не нашел

123456789101112131415161718192021222324252627

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <style> 
        .parent { 
            display: flex; 
            gap: 20px; 
        } 
 
        .parent>div { 
            border: 3px solid black; 
            padding: 100px 50px; 
            display: flex; 
        } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
        <div class="1">1</div> 
        <div class="2">2</div> 
        <div class="3">3</div> 
    </div> 
</body> 
</html>

размещает так: