设备移动时如何更改元素的顺序

Question

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.

Answer 1

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>

Answer 2

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.