Как сделать так, чтобы некоторые изображения отображались под div с текстом?

Question

Я работаю над веб-сайтом для кого-то, и я не могу показать три изображения под div с текстом для более тонких дисплеев. Вот HTML:

    <div id="mainText">
        <h1>Header Here</h1>
        <p>Paragraph Here</p>
    </div>

    <ul id="Images">
        <li><img src="IMG1.jpg" alt="Screenshot"></li>
        <li><img src="IMG2.jpg" alt="Screenshot"></li>
        <li><img src="IMG3.jpg" alt="Screenshot"></li>
    </ul>

Вот широкое разрешение CSS:

#mainText {
    width: 40vw;
    margin-left: 8vh;
    margin-right: 0;
    float:left;
}

#mainText h1 {
    color: #fff;
    padding: 3vh 0;
}

#mainText p {
    color: #ff00ff;
    line-height: 5vh;
}

#Images {
    float: right;
    margin-right: 20vw;
}

#Images img {
    width: 20vw;
}

А вот CSS в моем теге мультимедиа для небольших экранов:

@media only screen and (max-width: 800px) {
    #mainText p {
        width: 100%;
    }

    #Images {
        float: none;
    }
}

Любая помощь будет принята с благодарностью!

Answer 1

Всегда полезно предоставить визуальное описание того, чего вы пытаетесь достичь, но, надеюсь, это поможет ...

Если вы хотите «сложить» элементы вертикально, вы, вероятно, захотите создайте столбец и поместите элементы внутрь.

<div class="my-col">
  ... your code
</div>

с CSS, определяющим этот новый класс

.my-col {
  display: flex;
  flex-direction: column;
}

Answer 2

Вам необходимо установить float: none в #mainText div, а также

#mainText {
  width: 40vw;
  margin-left: 8vh;
  margin-right: 0;
  float: left;
}

#mainText h1 {
  color: #fff;
  padding: 3vh 0;
}

#mainText p {
  color: #ff00ff;
  line-height: 5vh;
}

#Images {
  float: right;
  margin-right: 20vw;
}

#Images img {
  width: 20vw;
}

@media only screen and (max-width: 800px) {
  #mainText p {
    width: 100%;
  }
  #Images, #mainText {
    float: none;
  }
}

<div id="mainText">
  <h1>Header Here</h1>
  <p>Paragraph Here</p>
</div>

<ul id="Images">
  <li><img src="IMG1.jpg" alt="Screenshot"></li>
  <li><img src="IMG2.jpg" alt="Screenshot"></li>
  <li><img src="IMG3.jpg" alt="Screenshot"></li>
</ul>