css - 具有响应性的 CSS 中的图像优先

Question

我正在使用 Bootstrap “featurette”功能。在页面上，左边是文字，右边是图片。当您缩小浏览器大小时，它们会彼此重叠，文本在顶部，图像在底部。我如何更改此设置，以便先显示图像，然后再显示下面的文字？

广告示例在这里 http://getbootstrap.com/examples/carousel/

如果您注意到功能部分，您就会在调整大小时明白我的意思。

我试过更改 float 位置，这是我唯一能想到的，但没有成功。

P.s 只是为了澄清，当超过 756 像素(或任何大小)时，我仍然希望它们位于同一位置，但在上面的示例中，当它改变大小时，我只希望图像位于顶部。

Answer 1

您应该为容器使用 display:flex 属性，并为元素使用 order 属性，如下所示。尝试更改元素的顺序并查看。

.elements-container{
  background: #000;
  width: 100%;
  height: 500px;
  display: flex;
 }
.text-box{
  order: 2;
  width: 200px;
  height: 200px;
  color: #ffffff;
  background: #ff0000;
  display: block;
 }
.image-box{
  order: 1;
  width: 200px;
  height: 200px;
  display: block;
 }

<div class="elements-container">
  <div class="text-box">This is text</div>
  <div class="image-box"><img src="http://lorempixel.com/200/200" /></div>
</div>