如何在手机上显示背景，在桌面上显示另一个背景？

Question

使用Bootstrap 4.1.1

我认为存在错误，但不确定。 实际上，我在手机上看到两个img，在桌面上看到一个img

我应该显示 ->在我的手机上，只有带有文本“ test phone”的img“ HeaderBackground_ht_mobile” ->在桌面上，只有img“ HeaderBackground_ht_desktop”和文本“ test desktop”。

非常感谢您的回复。

This is my codeply

<div class="container-fluid">
  <div class="row d-flex d-none d-sm-none d-md-block HeaderBackground_ht_desktop">
    <div class="..">
      <span>test desktop</span>
    </div>
  </div>
  <div class="row d-flex d-none d-md-none HeaderBackground_ht_mobile">
    <div class="..">
      <span>test phone</span>
    </div>
  </div>
</div>


.HeaderBackground_ht_mobile {
  background-image: url("https://via.placeholder.com/414x177.png/FF0000/FFFFFF?text=phone");
  height: 177px;
  background-repeat:no-repeat;
}

.HeaderBackground_ht_desktop {
  background-image: url("https://via.placeholder.com/1200x211.png/0000FF/808080?text=Desktop");
  height: 211px;
}