Css 2列布局，文本在图像右侧折叠为1列，文本在上方和下方？

我有一个响应流体宽度的网站。对于一个部分，我有一个标题、文本和图像

对于较大的显示，我需要标题和文本位于图像的右侧。对于较小的显示，我需要一个标题为第一列的单列。见图片

<div class="cont">
  <h1>Here is Title</h1>
  <div class="img"></div>
  <p>Some text</p>
</div>

.cont {
  background: grey;
  width: 30%;
  margin: auto;
}
.img {
  height: 200px;
  width: 200px;
  background: blue;
}

这种布局可行吗？出于支持原因，我不能使用flexbox

---

通过引导，您可以使用偏移参数以及拉动或推动命令。 使用普通css，您可以使用媒体查询设置绝对位置。。。 @介质全部和最大宽度：768px{ .头衔{职位：绝对职位； 顶部：0；左侧：0

或 宽度：100%；浮动：左；…} .蓝盒{宽度：100%；

---

页边空白顶部：20px；}

对于较小的屏幕，我会使用您当前的CSS作为默认值，然后使用媒体查询来调整较大屏幕的布局。您可能必须使用绝对定位

例如：

@media only screen and (min-width: 720px) {
  .img {
    position: absolute;
    top: 0;
    left: -200px;
  }
  .cont {
    margin-left: 200px;
    position: relative;
  }
}

编辑-无绝对定位的备选方案：

正如我在评论中提到的，您也可以将图像放置在内容中两次，然后根据需要通过媒体查询将其隐藏。这并不理想，但至少浏览器应该只下载一次图像

例如：

@media only screen and (min-width: 720px) {
  .img {
    position: absolute;
    top: 0;
    left: -200px;
  }
  .cont {
    margin-left: 200px;
    position: relative;
  }
}

.cont-wrap{ 背景：灰色； 宽度：60%； 保证金：自动； 溢出：隐藏； } 续{ 浮动：左； } .img{ 高度：200px； 宽度：200px； 背景：蓝色； } .左{ 显示：无； 浮动：左； } @仅介质屏幕和最小宽度：720px{ .img{ 显示：无； } .img.左{ 显示：块； } } 这是标题 一些文本

---

使用媒体查询即使使用媒体查询，我也不知道如何实现布局，或者如果没有绝对定位之类的东西，它是否可能。我真的不想使用绝对定位。对于具有动态内容的响应性网站来说，这不是一个稳健的解决方案。不确定在没有绝对定位的情况下这是否可行，图像需要退出常规内容流。。。另一种方法可能是将图像放在左侧和内容中，然后根据需要隐藏一个，浏览器只需下载一次。