3 Cột đáp ứng CSS (Thứ tự nội dung vị trí)

Question

Tôi tự hỏi có cách nào để đặt hàng vị trí nội dung khi kích thước màn hình giảm xuống 480 hoặc thấp hơn. Những gì tôi có nghĩa là trong col 3 tôi sẽ có tên, số & địa chỉ vv, trong cột 2 tôi sẽ có công cụ xã hội và col 1 tôi sẽ có một hình ảnh. Tôi muốn có tên và địa chỉ chồng lên trước, sau đó là hình ảnh, sau đó là các biểu tượng xã hội. Thứ tự sẽ là 3,1,2. Tôi đang cố giữ cho nó phản hồi.

CSS:

/* SECTIONS */ 
.section { 
clear: both; 
padding: 0px; 
margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
display: block; 
float:left; 
margin: 1% 0 1% 1.6%; 
} 
.col:first-child { margin-left: 0; } 


/* GRID OF THREE   ============================================================================= */ 


.span_3_of_3 { 
width: 100%; 
} 

.span_2_of_3 { 
width: 66.1%; 
} 

.span_1_of_3 { 
width: 32.2%; 
} 


/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 480px) { 
.span_3_of_3 { 
    width: 100%; 
} 
.span_2_of_3 { 
    width: 100%; 
} 
.span_1_of_3 { 
    width: 100%; 
} 
} 

HTML:

<div class="section group"> 
<div class="col span_1_of_3"> 
This is column 1 
</div> 
<div class="col span_1_of_3"> 
This is column 2 
</div> 
<div class="col span_1_of_3"> 
This is column 3 
</div> 
</div> 

Answer 1

Tôi đang gặp một chút rắc rối làm cho ý nghĩa của trật tự cột của bạn, nhưng cách để làm cho họ sắp xếp lại trên điện thoại di động là 'đẩy' và 'kéo' sử dụng lề. Ví dụ:

.span_1_of_3 { 
    margin-left: 33%; 
} 

.span_2_of_3 { 
    margin-left: -65%; 
} 

Điều này sẽ làm cho cột 2 xuất hiện trước cột 1 trong bố cục cạnh nhau (máy tính) và sau đó bạn có thể xóa lề cho bố cục xếp chồng (di động).

Xem jsFiddle này: http://jsfiddle.net/4KUUt/

EDIT 2

Tôi nghĩ rằng tôi đã có nó thiết lập theo thứ tự bạn muốn. Nếu bạn vẫn đang tìm kiếm giải pháp, hãy thử cách này: http://jsfiddle.net/4KUUt/5/

Answer 2

Huh, đây là giải pháp kỳ lạ, nhưng với jQuery :) Chỉ cần thử nghiệm.

Trước tiên, tôi đã thêm các lớp bổ sung bên trong đánh dấu HTML. Sau đó, tôi đã thêm dành cho di động thuộc tính này cho các lớp học .third

.third { 
    width: 100%; 
    margin: 0; 
    position: absolute; 
    top: 0; 
} 

và sau mã này jQuery

$(window).resize(function(){ 
    if ($(".third").css("position") == "absolute") 
    { 
     $(".first").css("margin-top", $(".third").height()); 
    } 
    else 
    { 
     $(".first").css("margin-top", "1%"); 
    } 
}); 

Có một thay đổi rất nhiều, vì vậy chỉ cần có một cái nhìn tại fiddle này http://jsfiddle.net/AYcVF/2/

Có lẽ ai đó có giải pháp CSS duy nhất, nhưng điều này là tốt nhất tôi có thể làm cho đến nay.

Answer 3

Sẽ hiệu quả hơn khi tối ưu hóa thứ tự nguồn của bạn cho thiết bị di động và sử dụng giải pháp của metadept để sắp xếp lại các cột cho máy tính để bàn.

Tuy nhiên, nếu thứ tự nguồn không thể được sửa đổi vì lý do gì hoặc bạn không biết độ rộng của các yếu tố bạn muốn sắp xếp lại, sau đó bạn cần Flexbox:

http://jsfiddle.net/4KUUt/3/

/* SECTIONS */ 
/* line 5, ../sass/test.scss */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* line 11, ../sass/test.scss */ 
.a { 
    background-color: #CCF; 
} 

/* line 14, ../sass/test.scss */ 
.b { 
    background-color: #CFC; 
} 

/* line 17, ../sass/test.scss */ 
.c { 
    background-color: #FCC; 
} 

/* GRID OF THREE   ============================================================================= */ 
@media only screen and (min-width: 480px) { 
    /* line 24, ../sass/test.scss */ 
    .span_3_of_3 { 
    width: 100%; 
    } 

    /* line 28, ../sass/test.scss */ 
    .span_2_of_3 { 
    width: 66.1%; 
    } 

    /* line 32, ../sass/test.scss */ 
    .span_1_of_3 { 
    width: 32.2%; 
    } 

    /* COLUMN SETUP */ 
    /* line 37, ../sass/test.scss */ 
    .col { 
    display: block; 
    float: left; 
    margin: 1% 0 1% 1.6%; 
    } 

    /* line 42, ../sass/test.scss */ 
    .col:first-child { 
    margin-left: 0; 
    } 
} 
@media only screen and (max-width: 480px) { 
    /* line 48, ../sass/test.scss */ 
    .section { 
    width: 100%; /* fix for Firefox */ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    } 

    /* line 53, ../sass/test.scss */ 
    .a { 
    -webkit-box-ordinal-group: 2; 
    -moz-box-ordinal-group: 2; 
    -webkit-flex-order: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
    } 

    /* line 57, ../sass/test.scss */ 
    .b { 
    -webkit-box-ordinal-group: 3; 
    -moz-box-ordinal-group: 3; 
    -webkit-flex-order: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
    } 
} 


<div class="section group"> 
    <div class="col span_1_of_3 a">This is column 1</div> 
    <div class="col span_1_of_3 b">This is column 2</div> 
    <div class="col span_1_of_3 c">This is column 3</div> 
</div> 

Lưu ý rằng Tôi đã sửa đổi các truy vấn phương tiện của bạn để có hiệu quả hơn một chút.