我需要正确地（没有硬代码）定位h1元素使用网格，css或Flex。所有这些元素都存储在大小相等的列中。在一行中。当屏幕变小时，我需要将element1和element2放在h1测试的下面。任务的细节不允许在css中为各种屏幕扩展使用@media。因此，我在这里写作，因为我不明白如何做到这一点。

我需要元素的这个位置

<article id="MyContainer">
      <div>
        <h1>SOME TEXT</h1> ----- i need to change this 
        <div id="buttonsZone">
          <button id="button1" class="btn-secondary">
          <span>
            <img src="myTest.svg">
          </span>
            <span>element 1</span>
          </button>
          <button id="button2" class="btn-secondary">
          <span>
            <img src="myPicture.svg">
          </span>
            <span>element 2</span>
          </button>
        </div>
      </div>
 </article>


article div:first-of-type {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 20px;
    align-items: center;
    vertical-align: middle;
}
 
article .btn-secondary {
    padding: 10px;
  }