Html 当屏幕尺寸较小时，需要CSS使H1文本不溢出

我有两个大的H1元素，当屏幕较大时，我希望彼此相邻，然后当屏幕较小时，将一个元素移到另一个元素的上方。我想我可以用CSS尽可能简单地使用它，但我遇到了麻烦。使用下面的代码，当屏幕变小时，文本将溢出到彼此的顶部

HTML:

---

最简单的答案是使用：

---

那意味着。。如果站点的宽度等于或小于768，它将使用此CSS而不是原始CSS。

所有需要的内容都使用媒体查询。 你可以读到它

现在谈谈你的问题。我正在编辑你的代码，并试图使它非常简单。 您可以查看我的更改并与代码进行比较。（html相同）

希望这对你有帮助

HTML:

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

h1 {
  margin: 0;
}

.numbers {
  display: inline-block;
  float: left;
  width: 50%;
}

.events-text {
  position: relative;
  top: -20px;
  font-size: 20px;
}

.title {
  font-size: 80px;
}

.bigCTA {
  display: block;
  text-align: center;
  width: 90%;
}

@media (max-width: 600px) {
  .numbers {
    width: 100%;
  }
}

---

@ZeevKatz是的。谢谢这和伦敦银行同业拆借利率的答案是一样的，所以两者都有效

@media(max-width: 768px) {
  .numbers {
    width: 100%;
  }
}

<div class="bigCTA">
  <div class="numbers" style="text-align: center;">
    <h1 id="numEvents" class="title">3,500+</h1>
    <br>
    <sm class="events-text">Events Held</sm>
  </div>

  <div class="numbers">
    <h1 class="title" style="margin-left: 25px;">$275M+</h1>
  <br>
    <sm class="events-text" style="margin-left: 25px;">Raised</sm>
  </div>
</div>

h1 {
  margin: 0;
}

.numbers {
  display: inline-block;
  float: left;
  width: 50%;
}

.events-text {
  position: relative;
  top: -20px;
  font-size: 20px;
}

.title {
  font-size: 80px;
}

.bigCTA {
  display: block;
  text-align: center;
  width: 90%;
}

@media (max-width: 600px) {
  .numbers {
    width: 100%;
  }
}