How to stack flex box in responsive

Question

I am still learning CSS, html and concepts of responsive design. Can someone can please help me to stack these boxes as rows in responsive instead of columns. Please see the code below.

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>Test Example</p>

      <ul>
        <li>test1</li>

        <li>test2</li>

        <li>test3</li>

        <li>test4</li>
      </ul>

      <p>Minor updates.</p>

      <ul>
        <li>test</li>

        <li>Test</li>
      </ul>

      <p><a href=".html" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>test123/p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>

        <p><a href="" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>