Flexbox: Single Column for Multilevel Table
I meet this problem with layouts a lot:
Small screens - elements are stacked on one line, usually an image followed by some text, and then a small sub-area for extra scatter:
Middle screens and up - items are shuffled 2 columns, image and miscellaneous content on the left, text on the right:
I feel like I can do this with flexbox, but I can't figure out how to do it. I get that I can order the items in columns using:
.container {
display: flex;
flex-flow: column wrap;
}
.one,
.two,
.three {
width: 50%;
}
.one {
order: 1;
}
.two {
order: 3;
}
.three {
order: 2;
}
But the problem is that there is no way to split the elements into 2 columns without setting a fixed height, which clearly doesn't work very well for responsiveness.
Is there a way to make the columns break at certain points?
+3
source to share
1 answer
You can do it like this. Making the width 100% at a mobile size. they take their line.
.container {
width: 75%;
margin: 0 auto;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: blue;
float:left;
}
.box2 {
background-color: green;
float: right;
}
.box3 {
background-color: purple;
float: left;
}
@media screen and (max-width: 800px) {
.box2 {
float: left;
}
.box1,.box2,.box3 {
width: 100%;
}
}
+1
source to share