I have trouble with flexbox layout in mobile device. Desktop it looks okay in Mobile view I want to display like below

1. first it should display "Overview" Box
2. second it should display "Payment" Box
3. 3rd it should display "Activity" Box

.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 >
  <div >
    <div >
      <div >
        Overview
      </div>
      <div >
        Activity
      </div>
    </div>
    <div >
      Payment
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        Overview
      </div>
      <div >
        Activity
      </div>
    </div>
    <div >
      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: contents