网站Media Query适配问题：464px下图片文本按钮布局失效求助

我正在为个人网站配置Media Query，期望在屏幕宽度为464px时，将图片、文本及按钮调整为指定的响应式布局（对应目标效果截图）。但尝试了flex-direction: column、调整边距等多种方法后均未生效。以下是原始布局截图、目标布局截图及我的实现代码，恳请协助解决该问题。

原始布局 #

464px宽度下的目标布局 #

我的实现代码 #

<section class="fifthPart">
  <div class="float-start" style="clear: none; width: 100%; margin-top: 50px;">
    <div style="padding-right: 5%; padding-left: 5%; width: 90%; box-sizing: content-box;">
      <div style="cursor: pointer; display: flex;">
        <div class="d-flex flex-column align-items-center" style="overflow: hidden;margin: auto 0; width: 100%;">
          <picture>
            <source srcset="/Images/Highlight-Bing-Wallpaper-Giants-Causeway.avif">
            <img src="/Images/Highlight-Bing-Wallpaper-Giants-Causeway.avif" alt="Highlight-Bing-Wallpaper-Giants-Causeway" style="width: 100% !important;">
          </picture>
        </div>
        <div style="margin-left: -100% !important; width: 100% !important; align-self: center;">
          <div style="padding-right: 5%; padding-left: 5%; width: 90%;">
            <div style="margin-bottom: 3rem !important; margin-top: 3rem !important;">
              <div style="width:47.66668% !important;">
                <div style="padding-left: 3rem !important; padding-right: 3rem !important; padding-bottom: 3rem !important; padding-top: 3rem !important; box-shadow: none !important; color: #000 !important; background: transparent;">
                  <div style="flex:1 1 auto">
                    <div>
                      <h2 style="font-size: 1.8125rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.2;">Bring the world closer with Bing Wallpaper</h2>
                    </div>
                    <div style="margin-bottom: 1.5rem !important;">Download the free app and enjoy breathtaking views with a new background each day.</div>
                  </div>
                  <div>
                    <button type="button" class="btn btn-primary">Get Bing Wallpaper</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我已经尝试过使用flex-direction: column以及调整内容边距等方法，但都没有效果。

内容的提问来源于stack exchange，提问作者user29084107