I have trouble with flexbox layout in mobile device. Desktop it looks okay in Mobile view I want to display like below
.div1 {
box-sizing:border-box;
border:0.5px solid red;
}
.main-container {
height:100%;
display:flex;
}
.left-container {
flex:1 1 0;
}
.right-container {
flex:1 1 0;
display:flex;
//flex-direction:column;
}
.half-containers {
flex:1;
overflow:auto;
order: 1;
}
.half-containers-activity {
flex:1;
overflow:auto;
order: 0;
}
@include media-breakpoint-down(sm) {
.main-container {
flex-direction: row;
}
}<div class="div1">
<div class="main-container">
<div class="left-container">
<div class="half-containers">
Overview
</div>
<div class="half-containers-activity">
Activity
</div>
</div>
<div class="right-container">
Payment
</div>
</div>
</div>You can use the following method. The main thing here is to use display: contents; on .left-container to "neutralize" it, so that all three elements can be used "on one level" as flex children, applying according order parameters to them. All that in a media query, of course, to leave the desktop version unaltered.
.div1 {
box-sizing: border-box;
border: 0.5px solid red;
}
.main-container {
height: 100%;
display: flex;
}
.left-container {
flex: 1 1 0;
}
.right-container {
flex: 1 1 0;
display: flex;
//flex-direction:column;
}
.half-containers {
flex: 1;
overflow: auto;
order: 1;
}
.half-containers-activity {
flex: 1;
overflow: auto;
order: 0;
}
@media screen and (max-width: 700px) {
.main-container {
flex-direction: column;
}
.left-container {
display: contents;
}
.half-containers {
order: 0;
}
.right-container {
order: 1;
}
.half-containers-activity {
order: 2;
}
}<div class="div1">
<div class="main-container">
<div class="left-container">
<div class="half-containers">
Overview
</div>
<div class="half-containers-activity">
Activity
</div>
</div>
<div class="right-container">
Payment
</div>
</div>
</div>I should add that display: contents; is still regarded an "experimental value", but browser support is quite good already: https://caniuse.com/?search=display%3A%20contents