css – How would I make this flexbox container responsive for smaller screen sizes?


.container {
  background-color: rgb(236, 236, 236);
  padding: 20px 10px 35px 10px;
  /* margin: 10px 0; */
  margin: 10px 30px 32px 30px;
}

.card-wrapper {
  display: flex;
}

.right-col,
.left-col {
  padding: 15px 30px 0 30px;
}

.left-col {
  width: 40%;
}

.right-col {
  width: 60%;
  margin-top: -10px;
}


/* img styling */

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


/* Title styling */

.card-wrapper h3 {
  font-family: Roboto;
  font-weight: 500;
  font-size: 2em;
  margin: 0;
}
<div id="projects" class="container">
  <div class="section-title">
    <span class="section-title-highlight">Projects</span>
  </div>
  <div class="card-wrapper">
    <div class="left-col">
      <img src="https://stackoverflow.com/images/mac on desk 1.png">
    </div>
    <div class="right-col">
      <h3>Project 1</h3>
      <button href="#" target="_blank" class="codeButton">View Code<i class="fa fa-github"></i></button>
      <p>I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock.</p>
      <p>Leggings lumbersexual small batch 8-bital small batch 8-bit<span id="dots">...</span><span id="more">I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella
                            snackwave lomo.
                            Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch
                            biodiesel
                            mlkshk, palo santo helvetica artisan affogato hammock.
                            Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch
                            biodiesel
                            mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid
                            YOLO.
                            Lumbersexual craft beer pitchfork.</span></p>
      <button onclick="myFunction()" id="myBtn" class="readMoreButton">Read more<i
                            class="fa fa-caret-down"></i></button>
    </div>
  </div>
  <br><br>
  <div class="card-wrapper">
    <div class="left-col">
      <img src="https://stackoverflow.com/images/mac on desk 1.png">
    </div>
    <div class="right-col">
      <h3>Project 2</h3>
      <button href="#" target="_blank" class="codeButton">View Code<i class="fa fa-github"></i></button>
      <p>I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella snackwave lomo. Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch biodiesel mlkshk, palo santo helvetica artisan affogato hammock.</p>
      <p>Leggings lumbersexual small batch 8-bital small batch 8-bit<span id="dots2">...</span><span id="more2">I'm baby vape craft beer palo santo truffaut pour-over twee bespoke hella
                            snackwave lomo.
                            Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch
                            biodiesel
                            mlkshk, palo santo helvetica artisan affogato hammock.
                            Leggings lumbersexual small batch 8-bit flannel live-edge. Single-origin coffee brunch
                            biodiesel
                            mlkshk, palo santo helvetica artisan affogato hammock thundercats crucifix portland squid
                            YOLO.
                            Lumbersexual craft beer pitchfork.</span></p>
      <button onclick="myFunction2()" id="myBtn2" class="readMoreButton">Read more<i
                            class="fa fa-caret-down"></i></button>
    </div>
  </div>
</div>