图片在 CSS 中第一张，响应式

Question

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

此处为广告示例http://getbootstrap.com/examples/carousel/

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

我试过更改浮动位置，这是我唯一能想到的，但没有用。

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

Answer 1

您应该对容器使用 display:flex 属性并且对元素使用顺序属性例如如下。试试改变元素的顺序看看。

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

图片在 CSS 中第一张，响应式

Image first in CSS with responsive

css

image

responsive