Tạo phần tử float responsive (đảo chiều trên mobile) với CSS

Để tạo các phần tử float đổi vị trí tùy theo kích thước màn hình (desktop: trái/phải, mobile: chồng lên nhau), sử dụng media query kết hợp float:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .floatRight, .floatLeft {
    color: white;
    font-size: 20px;
    padding: 10px;
    font-weight: 500;
  }
  .floatRight {
    background-color: rgb(0, 2, 95);
    float: right;
  }
  .floatLeft {
    background-color: rgb(85, 0, 74);
    float: left;
  }
  @media (max-width: 768px) {
    .floatRight {
      float: left;
    }
    .floatLeft {
      float: right;
    }
  }
</style>
</head>
<body>
<h1>Ví dụ Responsive Float</h1>
<h2>Các float sẽ đổi vị trí trên màn hình nhỏ</h2>
<div class="clearfix">
  <div class="floatRight">Float Right ></div>
  <div class="floatLeft">Float Left <</div>
  <br />
</div>
</body>
</html>

Giải thích

• Mặc định (desktop > 768px): .floatRight ở bên phải, .floatLeft ở bên trái
• Mobile (≤ 768px): Media query đảo ngược float
• .clearfix - Container cha cần clearfix để chứa các float con

Lưu ý

Cách tiếp cận hiện đại hơn là dùng Flexbox (flex-direction: row-reverse trong media query) hoặc CSS Grid, cho phép kiểm soát tốt hơn thứ tự hiển thị mà không phụ thuộc float.