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

Question

我有一个响应流畅的网站。对于一个部分，我有标题，文字和图像。

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

<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。

http://codepen.io/anon/pen/JoYMoX

Answer 1

使用bootstrap，您可以使用偏移参数，以及pull或push命令。 使用普通的css，你可以使用媒体查询设置位置绝对...      @media all和（max-width：768px）{      .title {position：absolute;       顶部：0;左：0;

OR       宽度：100％;向左飘浮; ...}      .bluebox {宽度：100％;       边距：20像素;}}

Answer 2

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

对于你的例子：

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

---

编辑 - 没有绝对定位的替代选择：

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

例如：

＆＃13;

＆＃13;

.cont-wrap {
  background: grey;
  width: 60%;
  margin: auto;
  overflow: hidden;
}
.cont {
  float: left;
}
.img {
  height: 200px;
  width: 200px;
  background: blue;
}
.left {
  display: none;
  float: left;
}
@media only screen and (min-width: 720px) {
  .img {
    display: none;
  }
  .img.left {
    display: block;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;