如何定位h1元素与其他元素的关系？

Question

我需要正确地（没有硬代码）定位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;
  }

Answer 1

这里有一种使用FlexBox的方法。

null

.container {
  display: flex;
  align-items: center;
  border: 1px solid;
  padding: 10px;
  flex-wrap: wrap;
}

h1 {
  flex-grow: 1;
}

<div class='container'>
  <h1>
    h1 text
  </h1>
  <div>
    <button>
      button 1
    </button>
    <button>
      button 2
    </button>
  </div>
</div>