Page divided to 50% left div and 50% right div , need to change order of appearance of left and righ-CodePudding

I have a container with 2 divs, left and right , each div takes 50% of the screen size. On mobile, I show left and right as 100% width and flex column but I need to change to order of appearance of items from each div, for example on desktop left shows 1,2,3 right shows 4,5,6 on mobile I want to show 1,2,4 3,5,6

thank you

CodePudding user response：

I think you can just set the container to display:flex and use order property on child components like in this example. Combine this with @media rules to use it only on mobile version of your page.

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}

/* Safari 6.1  */
div#myRedDIV   {-webkit-order: 2;}
div#myBlueDIV  {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV  {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV   {order: 1;}
div#myBlueDIV  {order: 2;}
div#myGreenDIV {order: 3;}
div#myPinkDIV  {order: 4;}

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

CodePudding user response：

You can use order property and display:flex to accomplish this. Check the below code snippet in full screen and you can see it in action. Hope this helps.

.parent{
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.child{
      -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.red{
  background-color:red;
  color:white;
}

@media screen and (max-width:767px){
  .child{
        -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
  }
  .order-1{
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
  }
  .order-2{
    -webkit-box-ordinal-group:3;
    -ms-flex-order:2;
    order:2;
  }
  .order-3{
    -webkit-box-ordinal-group:4;
    -ms-flex-order:3;
    order:3;
  }
  .order-4{
    -webkit-box-ordinal-group:5;
    -ms-flex-order:4;
    order:4;
  }
  .order-5{
    -webkit-box-ordinal-group:6;
    -ms-flex-order:5;
    order:5;
  }
  .order-6{
    -webkit-box-ordinal-group:7;
    -ms-flex-order:6;
    order:6;
  }
}

<div >
  <div >
    1
  </div>
  <div >
  2
  </div>
  <div >
  3
  </div>
  <div >
  4
  </div>
  <div >
  5
  </div>
  <div >
  6
  </div>
</div>