如何在移动设备上堆叠两个 div，但在桌面上并排排列？

我在桌面上设置了这个，标题在左侧，图像在右侧。当我折叠浏览器小于 880 像素时，我希望图像在标题下方居中。

我正在努力让图像居中并位于标题下方。

我对 html/css 相当陌生，所以任何提示将不胜感激。

Fiddle: https://jsfiddle.net/o7k5qgne/1/

<section class="hero">
      <div class="hero-inner">
        <h1>Lorem ipsum dolor<span class="blue-dot">.</span></h1>
      </div>

      <div class="split split-right">
        <img src="https://vignette.wikia.nocookie.net/undertale-rho/images/5/5f/Placeholder.jpg/revision/latest?cb=20180213155916" alt="working" class="right-image">
      </div>
    </section>

    <div class="clients">
      <h2>Lorem ipsum dolor & sit amet</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    </p>
    </div> 

尝试使用CSS media Query检测您希望 DIV 堆叠的位置（断点）。请参阅下面的示例并根据需要进行调整。

.myDiv {
  height: 150px;
  width: 150px;
  display: inline-block;
  background-color: orange;
  margin-bottom: 25px;
}

/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

@media screen and (max-width: 320px) {
  
  .myDiv {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */
    
  }
  
}

<div class="myDiv"></div>
<div class="myDiv"></div>

有关 CSS 媒体查询的更多信息

See it here在行动中。调整浏览器大小以查看其工作原理。