Hoán đổi vị trí div trong CSS

 

--------------####----------------

--------------####----------------

DEMO

***** CSS

.vhproductall {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    align-content: center;

    margin-bottom: 40px;

}

.vhproductall .colt {

    width: calc(100% - 535px);

}

.vhproductall .cold {

    width: 535px;

}

--------------####---------------

NOTE: CHATGPT

Dòng CSS này:

.vhproductall:nth-child(even) .colt {
    order: 2;
}

Có nghĩa là:

• .vhproductall:nth-child(even): chọn tất cả phần tử có class là vhproductall và là phần tử con thứ chẵn (even = 2, 4, 6, ...).

• .colt: bên trong những phần tử .vhproductall chẵn đó, chọn phần tử con có class là colt.

• order: 2;: áp dụng thuộc tính CSS Flexbox order: 2, nghĩa là đổi thứ tự hiển thị của phần tử colt này trong layout flex.

---

Ví dụ dễ hiểu:

Giả sử HTML:

<div class="vhproductall">
  <div class="colt">A</div>
  <div class="other">B</div>
</div>
<div class="vhproductall">
  <div class="colt">C</div>
  <div class="other">D</div>
</div>

Nếu bạn dùng Flexbox trong .vhproductall, thì với nth-child(even) là phần tử thứ 2 (div thứ 2 .vhproductall), C có order: 2, sẽ bị đẩy xuống sau D, dù viết trước trong HTML.