How to change order of elements when device is mobile-CodePudding

I have sth like this

<div className="Image"><div><div className="Text"><div>
<div className="Text"><div><div className="Image"><div>
<div className="Image"><div><div className="Text"><div>

How to swap content between my divs when device is mobile??

Is any trick for it? Or should i write a code again for mobile? I use bootstrap and flex box.

CodePudding user response：

Using Flexbox, you can use order.

.container{
  display:flex;
}
.order-1{
  order:1;
}
.order-2{
  order:2;
}
.order-3{
  order:3;
}
@media(min-width:992px){
  .order-lg-1{
    order:1;
  }
  .order-lg-2{
    order:2;
  }
  .order-lg-3{
    order:3;
  }
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>   
</div>

CodePudding user response：

div is originally display: block. You may have to put an outside div to envelop the three divs you have and apply display: flex.

div{
  display: flex;
  flex-wrap: wrap;
}

<div >
  <div className="Image">image<div>           
  <div className="Text">text<div>            
  <div className="Image">image<div>            
</div>

When you reduce the screen size, the elements will be displayed in columns.