изображения не отображаются должным образом в мобильном представлении

Question

Мой вопрос об изображениях ( Фотография два ) в мобильном телефоне не отображается по желанию один за другим, и они выходят за пределы высоты раздела «проект» и переходят в раздел «контакт».Может кто-нибудь предложить мне решение?В Photo One вы можете видеть, как они отображаются в режиме десктопа.

#projects {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.img-wrap {
  padding-top: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-img {
  border-radius: 12px;
  max-width: 270px;
  width: 100%;
}

<div id="projects">
  <div class="container">
    <h1 class="work-title-1">My Recent Work</h1>
    <h2 class="work-title-2">"Here are a few recent design projects. Want to see more?"
      <a href="#">Email me.</a>
    </h2>
    <div class="row">
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Если вы используете flex, чтобы они появлялись один за другим, я предлагаю вам использовать:

.row {
 display: flex;
 flex-direction: column;
}

И если вы не хотите, чтобы они появлялись один за другим на компьютере, попробуйте использовать экран @media с соответствующей шириной для каждого типа экрана. А для ПК: flex-direction: row .

Я надеюсь, что помог вам,

Привет.