Question

在小屏幕上，我试图让我的.image div插入.title和.text div之间，例如：

title
image
text

.title和.text包装在一个容器中，这是在不同的屏幕尺寸（中等）我可以做的：

title | image
text  | continuation of image element

我考虑过对小屏幕使用弹性列布局，以及更改元素的顺序，但是顺序似乎不会对嵌套的子元素产生影响。

这里是小代码：

HTML：

<div class="container">
    <div class="content">
        <div class="title"></div>
        <div class="text"></div>
    </div>
    <div class="image"></div>
</div>

CSS：

.container {
     display: flex;
     flex-direction: column;
}
.image {
    order: 2;
}
.title {
    order: 1;
}
.text {
    order: 3;
}

作为参考，我的媒介代码是（从小向上级联）：

.container {
     flex-direction: row;
}
.content {
    flex-basis: 50%;
}
.image {
    flex-basis: 50%;
}

Answer 1

您只能订购兄弟元素。标题和文字不是图像的兄弟。您需要在一般父块中包装标题，文本和图像

Flex - 改变嵌套元素的顺序？

1 个答案: