just getting started with flexbox.
After managing to align img div and text div, I added the “felx-wrap:wrap” to the container so that img and text would be stacked on top of each other on smaller screens. Now they are always stacked on top of each other. Why? Do I need a media query?

HTML:

<div class="banner-container">
            <div class="banner-img">
                <img src="https://www.region-muenchen.com/fileadmin/region-muenchen/Dateien/Fotos_Abb/Landkreiskarten/DAH_Ausschnitt.jpg" alt="map Dachau area">
            </div>
            <div class="intro-text">
                <h1>Something</h1>
                <h4>Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something Something </h4>
            </div>
        </div>

CSS:

.banner-container{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.intro-text{
  border: 2px solid blueviolet;
  margin: 10px;
}

.banner-img{
  border: 2px solid blue;
  max-width: 50%;
  margin: 10px;
}

.banner-img img{
  width: 100%;
  height: auto;
}

I was expecting to stack my divs only when there isnt enough space to display them next to each other.