Để làm được điều này, bạn cần sử dụng khái niệm "flex-direction" của CSS. Giả sử sau đây là phong cách CSS của chúng tôi -
<style>
.demo{
display: flex;
flex-direction: column-reverse;
}
</style> Bây giờ, hãy đặt vị trí div so với một div khác -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.demo{
display: flex;
flex-direction: column-reverse;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">DIV_DEMO1</div>
<div class="demo2">DIV_DEMO2</div>
</div>
<script>
</script>
</body>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
