0
我使用Flexboxes進行響應式網頁設計，並根據顯示尺寸更改我的div箱的順序。CSS Flexbox訂單
對於PC-View，我使用兩種類型的設計：左側圖片（左側浮動;左側清晰）右側圖片（右側浮動;右側清晰）浮動文本。
對於Mobile-View，我使用「order」將其更改爲列flexbox設計（Title on Top，後面是圖片，然後是文本）。這適用於右側圖片，沒有任何問題。對左側圖片使用相同的代碼將圖片放在底部，而沒有任何改變它的機會。
有沒有人有一個想法，爲什麼？
@media only screen and (max-width: 900px) {
div.wrap_content_pic_left, div.wrap_content_pic_right {
\t width: 97%;
\t \t \t \t
\t \t display: -webkit-flex;
\t \t display: flex;
\t \t -webkit-flex-direction: column;
\t \t flex-direction: column;
\t \t -webkit-align-items: center;
\t \t align-items: center;
\t \t -webkit-justify-content: center;
\t \t justify-content: center
\t \t \t \t
\t } \t \t \t
\t div.wrap_content_pic_right h1, wrap_content_pic_left h1, {
\t \t -webkit-order: 1;
\t \t order: 1;
\t }
\t div.wrap_content_pic_right h3, wrap_content_pic_left h3, {
\t \t -webkit-order: 3;
\t \t order: 3;
\t }
\t div.wrap_content_pic_left div#pic, div.wrap_content_pic_right div#pic {
\t \t float: none;
\t \t \t
\t \t -webkit-order: 2;
\t \t order: 2;
\t
\t \t width: auto;
\t \t text-align: center;
\t \t \t
\t }
}
div.wrap_content_pic_right, div.wrap_content_pic_left {
\t \t /*Position*/
\t \t position: relative;
\t \t padding: 1%;
\t \t margin-bottom: 1%;
\t \t clear: both;
\t }
\t div.wrap_content_pic_right div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t \t \t \t \t
\t \t /*Position*/
\t \t float: right;
\t \t clear: right;
\t \t \t \t \t \t
\t }
\t \t
\t \t
\t div.wrap_content_pic_left div#pic {
\t \t /*Size*/
\t \t width: 30%;
\t \t /*Position*/
\t \t float: left;
\t \t clear: left;
\t }<div class = "wrap_content_pic_left">
<div id="pic">
<a href = "URL"><img src="PIC"/></a>
<h3><a href = "URL">Text</a></h3>
</div>
<h1>Title</h1>
<h3>Text</h3>
<div id="mobile" ><h3><a href = "URL">Text</a></h3></div>
<div style="clear: both"></div>
</div>
\t
請注意，浮動容器中的浮動被忽略。 http://stackoverflow.com/q/39194630/3597276 –