How do I make the contents display in column format on smaller devices?

Issue

I am working towards my website and I want to make the flex box contents to display on top of each other on smaller screens.

Here is how it looks on bigger screens: Display on larger screens

On smaller screens: Display on smaller screens

CSS & HTML:

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
}

.about .about-content .about__info {
  display: flex;
  flex: 0 0 100%;
  justify-content: space-evenly;
  margin-top: 40px;
}

.padd-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.about__info-title,
.about__info-name {
  display: block;
  text-align: center;
}

<div class="row">
  <div class="about__info">

    <div class="row">
      <div class="padd-15 item">
        <span class="about__info-title padd-15">08+</span>
        <span class="about__info-name">Years <br> experience</span>
      </div>

      <div class="padd-15 item">
        <span class="about__info-title padd-15">20+</span>
        <span class="about__info-name">Completed <br> project</span>
      </div>

      <div class="padd-15 item">
        <span class="about__info-title padd-15">05+</span>
        <span class="about__info-name">Companies <br> worked</span>
      </div>
    </div>

  </div>
  <div class="row">
    <div class="buttons padd-15">
      <a download='' href="resume/res2.0.docx" class="btn padd-15">
          Download CV <i class="uil uil-download-alt download__icon"></i>
      </a>
    </div>
  </div>

</div>

Any help is greatly Appreciated

Solution

It's simple. You just need to use a media query and use flex-direction:column.

@media(max-width:768px) { /* means apply CSS til size is less than or equal to 768px */
  .row {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
}

.about .about-content .about__info {
  display: flex;
  flex: 0 0 100%;
  justify-content: space-evenly;
  margin-top: 40px;
}

.padd-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.about__info-title,
.about__info-name {
  display: block;
  text-align: center;
}

@media(max-width:768px) {
  .row {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
}

<div class="row">
  <div class="about__info">

    <div class="row">
      <div class="padd-15 item">
        <span class="about__info-title padd-15">08+</span>
        <span class="about__info-name">Years <br> experience</span>
      </div>

      <div class="padd-15 item">
        <span class="about__info-title padd-15">20+</span>
        <span class="about__info-name">Completed <br> project</span>
      </div>

      <div class="padd-15 item">
        <span class="about__info-title padd-15">05+</span>
        <span class="about__info-name">Companies <br> worked</span>
      </div>
    </div>

  </div>
  <div class="row">
    <div class="buttons padd-15">
      <a download='' href="resume/res2.0.docx" class="btn padd-15">
                                            Download CV <i class="uil uil-download-alt download__icon"></i>
                                        </a>
    </div>
  </div>

</div>

Answered By - Nikkkshit