How to change order of elements when device is mobile

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.

>Solution :

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 class="container">
  <div class="order-3 order-lg-2">A</div>
  <div class="order-2 order-lg-1">B</div>
  <div class="order-1 order-lg-3">C</div>   
</div>

Leave a Reply