页眉和文本环绕图像而不是坐在图像下方

Question

打开浏览器窗口时，我的标题和文本恰好位于img旁边。当我调整窗口大小，文本和标题环绕img时，问题就来了。我需要的是IMG在标题和文本上方。我正在建立响应能力，所以这是我的第一要点

我尝试了float属性和其他显示属性，但无法使它们工作

<div class="container" id="container-3">
  <h1 id="title">Recent writings</h1>
  <div class="row" id="row-3">
    <div class="col-md-9">
      <div class="recent-writings">
        <img class="img-fluid" src="IMG/glasgow.JPG" alt="Glasgow">
        <h3>Hello world, this is a h6 title palcholder</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 in voluptate velit esse cillum
           dolore eu fugiat nulla pariatur. Excepteur sint occaecat
           cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
    <div class="col-md-3">
    </div>


  </div>
  <!--row-3-->
</div>

我需要图像做出响应，并且在调整大小时，标题和文本必须在图像下方。 如果有人可以告诉我如何轻松地复制和粘贴代码，那将真的很有帮助