Thứ tự chuyển đổi của các phần tử HTML khi thay đổi bố cục trong Thiết kế web đáp ứng

Question

Tôi đang xây dựng trang web đáp ứng và để có trải nghiệm người dùng tốt, tôi cần một số thay đổi bố cục từ thiết bị di động sang máy tính để bàn. Cụ thể, tôi cần chuyển đổi thứ tự của một số phần tử HTML.

Tôi cần các phần tử HTML theo thứ tự khác nhau cho máy tính để bàn so với thiết bị di động.

Mobile

<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div> 

tự chuyển cho Desktop

<div class="one">One</div> 
<div class="three">Three</div> 
<div class="two">Two</div> 

này được đơn giản hóa phiên bản của những gì tôi muốn đạt được. Tôi nghĩ rằng nó được gọi là progressive enhancement. Các chuyên gia thiết kế web di chuyển các phần tử html xung quanh như thế nào? Với JavaScript? Nó có bình thường không? Có bất kỳ plugin jQuery nào không?

Answer 1

Chỉ cần sử dụng jQuery để thay đổi DOM xung quanh theo yêu cầu

if (mobile == true) { 

    $('div.three').insertBefore($('div.two')); 
} 

Answer 2

Bạn có thể làm điều này bằng jquery những gì bạn cần làm là kiểm tra các thiết bị và lắp theo nó

cũng tốt của nó để đọc webdesign đáp ứng, nơi bạn sẽ tìm hiểu những thứ như vậy kiểm tra qustion này Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

tôi tìm thấy ở đây lời khuyên tốt và cũng có thể kiểm tra điều này

1. Beginner’s Guide to Responsive Web Design
2. Responsive Web Design

Answer 3

Tùy thuộc vào cách bố trí của bạn sẽ có một số cách để đạt được điều này. Nếu divs của bạn đang xếp chồng lên nhau trên máy tính để bàn và theo chiều dọc trên thiết bị di động, bạn có thể sử dụng kết hợp các phao nổi và truy vấn phương tiện để hiển thị chúng theo đúng thứ tự.

Nếu không phải dự phòng cuối cùng của bạn có thể là tạo 4 div.

<div>one</div> 
<div>three(mobile)</div> 
<div>two</div> 
<div>three(desktop)</div> 

Sau đó, sử dụng truy vấn phương tiện để ẩn div "ba" liên quan tùy thuộc vào thiết bị.

Answer 4

mã sau sẽ stack div trong điện thoại di động và trên desktop nó sẽ là một bố trí 2 cột

<div class="main"> 

</div> 
<div class="aside"> 
</div> 

<style type="text/css"> 
    @media only screen and (min-width: 768px) { 
     .main {float:right;width:60%} 
     .aside {float:left;width:40%} 
    } 
</style> 

Answer 5

Hãy thử với: display: flex; flex-direction: column;

Thông tin thêm ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Answer 6

Đang phục hồi câu hỏi này bởi vì tôi đã xem qua nó thông qua google, và câu trả lời hiện đang lỗi thời. Giải pháp tôi đã kết thúc bằng cách sử dụng là only one with the downvote, vì vậy tôi sẽ xây dựng trên nó.

Sử dụng display:flex sẽ cho phép bạn xếp lại thứ tự các yếu tố sử dụng các thuộc tính column/column-reverse:

.container{ display:flex;flex-direction:column } 
@media screen and (min-width:600px) { 
    .container{ flex-direction:column-reverse } 
} 

Xem JSFiddle here, và một số bảng hỗ trợ here.

Ngoài ra kiểm tra một vài CSS sau xử lý here và here