Text won't wrap around image flexbox-CodePudding

I can't seem to get the text to wrap around the image on the home page...

Also I want to prevent the aside item on the right from moving underneath text - I simply want it to dissapear as it would on a mobile device.

@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Baloo 2&family=Comfortaa&family=Shadows Into Light&display=swap');

body {
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-family: 'Baloo 2', cursive;
    /*font-family: 'Comfortaa', cursive;*/
    height: 100vh;
}

p {
    margin: auto;
    text-align: center;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    
}

h2 {
    text-align: center;
    font-size: 2em;
    margin-bottom: auto;
    margin-top: auto;
}

/* Navigation Styling Definitions */
nav {
    width: 100%;
    top: 0;
    position: fixed;
    background-color: rgba(255,255,255,0.70);
    z-index: 101; 
}

nav ul {    
    display: flex;
}

nav li {
    flex: 1;
    display: inline;
    list-style-type: none;
    text-align: center;
}

nav a {
    text-decoration: none;
    color: black;
}

nav a:hover {
    text-decoration: overline underline;
    color: darkslategray;
}

/* Header Styling Definitions */
header {
    background-image: url("images/sunset-1645103.jpeg");
    position: relative;
    width: 100%;
    height: 300px;
    background-position: center;
    margin-top: 55px;
}

.logo_header {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Section Styling Definitions */
section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 99%;
    margin: 0 auto;
}

/* Link and Image Styling */

.phone {
    text-decoration: none;
    color: black;
}

.phone:hover {
    color: darkslategray;
}

.call_img {
    width: 40px;
    height: 40px;
    padding-bottom: -10px;
}

.home_img {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 400px;
    margin-left: 0;
    padding: 5px;
    float: left;
}

/* Aside Styling Definitions */
aside {
    flex: 1;
}

.aside_adv {
    height: 600px;
    width: 300px;
    margin-right: 0;
    padding-bottom: 5px;
}

/* Article Styling Definitions */
article {
    display: flex;
    flex: 3;
    background-color: transparent;
}

.article_home {
    display: flex;
    float: none;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 80%;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}

/* Footer Styling Definitions */
footer {
    display: flex;
    flex-direction: row;
    text-align: center;
    background-color: black;
    color: aliceblue;
}

#footer_left {
    flex: 1;
    margin: auto 0;
}

#footer_centre {
    flex: 1;
}

#footer_right {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Define footer styles */

.logo_footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

.legal {
    margin: 0;
    padding-top: 5px;
}

.legal_stuff {
    text-decoration: none;
    color: white;
}

.privacy_policy {
    text-decoration: none;
    color: white;
}

footer i {
    margin-left: 5px;
    margin-right: 5px;
    color: white;
}

footer a {
    color: coral;
    text-decoration: none;
}

.privacy_policy:hover {
    font-weight: bold;
}

.legal_stuff:hover {
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
    section {
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    nav {
        width: 100%;
    }
    
    nav ul {
        flex-direction: column;
    }

    header {
        margin-top: 130px;
    }
    
    section {
        flex-direction: column;
    }
    
    .quick_link {
        margin-top: .2em;
        margin-bottom: .2em;
        width: 80%;
    }
    
    aside {
        display: none;
    }
    
    nav ul {
        flex-direction: column;
    }
    
    form {
        margin: 0 auto;
        flex-direction: column;
    }
    
    .label {
        text-align: left;
    }
    
    footer {
        flex-direction: column;
    }
}

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css" text="text/css">
    <title>Summer Escapes</title>
<!-- Include the font awesome icons on the page -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
 
    <section>
        <div class="cta">
            <h2>About Us</h2>
        </div>
        <div class="cta">
            <h2>Latest Review</h2>
        </div>
        <div class="cta">
            <h2>Favourite Location</h2>
        </div>
    </section>
    <section>
        <article class="article_home">
            <img class="home_img" src="https://i.imgur.com/iDzmgeg.jpeg" alt="Holiday Image">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius ornare pulvinar. Nullam ut tristique neque. Nulla sodales pharetra odio nec convallis. Phasellus nisi lorem, consequat vestibulum lacus vel, maximus fermentum est. Vivamus tincidunt vestibulum magna, consectetur elementum erat blandit at. Vivamus eget risus pharetra, porta odio ut, rutrum urna. Donec malesuada eget dui in pharetra. Vivamus et sem elementum, imperdiet risus a, fringilla tortor. Maecenas aliquet quam eros, vitae pretium justo fermentum facilisis. Suspendisse a nisl nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nisi diam, mollis a lacus vel, cursus congue libero.

            Curabitur nec felis velit. Cras rhoncus volutpat eros et gravida. Sed faucibus, sapien eu laoreet gravida, mi orci facilisis velit, et scelerisque purus ipsum quis metus. Pellentesque arcu leo, tempus ac dignissim at, tincidunt id felis. Mauris maximus mi sit amet varius feugiat. Duis eros ipsum, pulvinar quis odio quis, bibendum ultricies quam. Nullam blandit eu nibh non rutrum. Quisque tempus neque dui, vitae semper turpis sodales a.

            Quisque purus magna, aliquam ac ullamcorper vitae, pretium eget leo. Donec porttitor, nunc id dictum pellentesque, nunc est iaculis nibh, et ultrices lectus tortor vel urna. Duis lorem elit, commodo ut nisl vel, finibus placerat eros. Maecenas vitae mattis ipsum. Duis imperdiet molestie sapien at tempus. Donec a ex id neque iaculis elementum. Praesent sodales, sem eu dapibus dignissim, mi orci luctus nunc, quis tempus risus mi sit amet lacus. Nam ac iaculis purus, et iaculis magna. Integer commodo eleifend sapien at varius. Praesent lectus libero, sollicitudin sed libero sed, aliquet viverra eros. Quisque interdum odio a maximus aliquam. Donec vitae rhoncus sapien. Aenean imperdiet orci commodo tempus finibus. Nullam ac malesuada mauris. Sed ullamcorper turpis non lectus interdum, sit amet egestas urna rutrum. Maecenas eget pharetra tortor.
        </article>
        <aside>
            <img class="aside_adv" src="images/pexels-mikael-blomkvist-6476808.jpeg" alt="Advertisement">
        </aside>
    </section>

</body>
</html>

Sorry for all the questions HTML/CSS are new to me and am studying it. First time using flexbox as well so it is likely my code is wrong

CodePudding user response：

Don't use flex for this. A way easier solution is to assign float: left or float: right on the images so that the text wraps neatly around it. You can add padding or margins to add the required space.