Flex - changing order of nested elements? - html

Question

On small screens i'm trying to get my .image div to slot in between .title and .text divs, something like:
title
image
text
.title and .text are wrapped in a container, this is so on a different screen size (medium up) I can do:
title | image
text | continuation of image element
I've thought about using a flex column layout for small screens, and changing the order of elements, but order doesn't seem to have an effect on a nested child element.
Here's the code for small:
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;
}
For reference my code for medium is (cascading upwards from small):
.container {
flex-direction: row;
}
.content {
flex-basis: 50%;
}
.image {
flex-basis: 50%;
}

Answer 1

You can ordering only sibling elements. Title and text aren't sibling with image. You need wrap title, text and image in general parent block

Answer 2

I have similar case, but for solution CSS grid is used, however there is also another support is recommended: CSS subgrid
For a simple design like even columns or rows it is not that hard to replicate, but if parent container contain more complex grid sizes, then CSS subgrid will be requirement for an only CSS solution.
Here is full demo: https://codepen.io/XCanG/pen/vYaNZPo?editors=1100
HTML I have in the demo have very similar structure with having parent, some container for 2 nested elements and 3rd element.
This is quote from my demo, except I rename class names according to your example:
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.container .content {
display: grid;
grid-column: 1;
grid-row: 1 / span 3;
grid-template-rows: repeat(3, 1fr); /* Fallback */
grid-template-rows: subgrid; /* Limited support: https://caniuse.com/css-subgrid */
grid-template-columns: subgrid;
}
.container .title {
grid-colimn: 1;
grid-row: 1;
}
.container .text {
grid-column: 1;
grid-row: 3;
}
.container .image {
grid-column: 1;
grid-row: 2;
}
CSS make that nested element follow grid columns and rows, with subgrid support you will have exactly defined part of the grid (otherwise you will need to define fallback). And with grid-column and grid-row it is possible to sort elements.

Answer 3

Grid-template-areas will come in pretty handy in this type of layout as they are not siblings. And grid-template-areas have full browser support.
.container {
display: grid;
grid-template-areas: "title img"
"txt img";
}
.title{grid-area: title;}
.text{grid-area: txt;}
.image{grid-area: img;}
#media(max-width: 800px){
.container{
grid-template-areas: 'title'
'img'
'txt';
}
}
<div class="container">
<div class="content">
<div class="title">title</div>
<div class="text">text</div>
</div>
<div class="image">img</div>
</div>