Flexbox within view

HTML

<!DOCTYPE html>
<html class = "no-js">
	<head>
		<meta charset='UTF-8' />
		<link rel="stylesheet" type="text/css" href="main.css">

	</head>

	<body>
		<div class="intro_header" style="background-image: foo.jpg">
            
            <div class="oneColumnText">
            <p>Lorem ipsum dolor sit amet</p>
            </div>

            <div class="oneColumnText">
            	<p>Lorem ipsum dolor sit amet</p>
            </div>

            <div class="oneColumnText">
            	<p>
                	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales nulla sed fermentum tempor. Maecenas eget posuere massa. Sed consequat, erat ac tincidunt porttitor, augue sapien feugiat ligula, id ultricies augue tortor id mauris. Duis mattis felis non libero iaculis, nec varius turpis pharetra. Vivamus convallis nibh ac arcu condimentum porta. Ut tristique in erat quis lobortis. Etiam ut elit in sem placerat dapibus.
            	</p>
            </div>
        </div>
	</body>

</html>

CSS

.intro_header{
    display: flex;
    width: 100%;
    padding: 10% 10% 5% 10%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    flex-wrap: wrap;
    justify-content: space-between;
    }

/* Generic flexbox paragraph text div that can be used for one column display regardless of responsiveness */ 
/*can swap around elements using the order: style */
.oneColumnText{
    width: 100%;
    text-align: center;

}