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.
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>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 class="container">
<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.