How to stack flex box in responsive-CodePudding

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 >
  <div >
    <div  style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div >Header</div>

    <div >
      <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"  role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div >
    <div  style=" background-color: #7ECEFD;"></div>

    <div >Header</div>

    <div >
      <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=""  role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

CodePudding user response：

Remove margin on col1 and use flex-direction: column; on your row.

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

@media only screen and (max-width: 600px) {
  .row {  
    flex-direction: column;
  }
  .col1 {
    margin: 0px !important;
  }
}

.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 >
  <div >
    <div  style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div >Header</div>

    <div >
      <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"  role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div >
    <div  style=" background-color: #7ECEFD;"></div>

    <div >Header</div>

    <div >
      <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=""  role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

Edit ~ Image of flex-direction: row; with gap. Resembles margin you had set initially.

Edit ~ added media-query to have div's stack when resizing. Also, put back in your margin for the row/desktop view on IE, but removed the margin once the div's stack.

@media only screen and (max-width: 600px) {
  .row {  
    flex-direction: column;
  }
  .col1 {
    margin: 0px !important;
  }
}