在響應模式下更改具有CSS的訂單元素

Question

圖1是桌面模式;下面兩張圖片和文字，共三個div。

圖2是我希望如何在移動瀏覽器（如手機）中顯示它。

如何做到這一點任何想法？

我願意接受任何建議。這個想法是讓文字在圖像上方顯示，以便最好地說明這兩幅圖像的描述。將文本置於桌面版本上並不是一種選擇。

Answer 1

您可以通過使用CSS @media查詢實現這一目標和彎曲order這樣的：

的jsfiddle - DEMO

HTML：

<div class="div-1"> 
    <div class="div div-2">image 1</div> 
    <div class="div div-3">image 2</div> 
    <div class="text">my text</div> 
</div> 

CSS：

.div-1 { 
    width: 100%; 
    text-align: center; 
} 
.div { 
    display: inline-block; 
    width: 300px; 
    height: 200px; 
    background: #EEE; 
    margin: 10px; 
} 
@media (max-width: 660px) { 
    .div-1 { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: center; 
    } 
    .div-2 { 
     order: 2; 
    } 
    .div-3 { 
     order: 3; 
    } 
    .text { 
     width: 100%; 
     order: 1; 
    } 
} 

Answer 2

CSS Flexbox允許您在不更改HTML標記的情況下change the order of elements。所以：

• 訂單桌面元素
• 然後使用媒體查詢和柔性顯示器，以更改順序

/* DESKTOP CSS */ 
 

 
#image1, 
 
#image2 { 
 
    display: inline-block; 
 
    width: 5em; 
 
    height: 5em; 
 
    background-color: #CCC; 
 
} 
 

 
/* MOBILE CSS */ 
 

 
@media only screen and (max-width: 700px) { 
 
    #wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    #caption { 
 
    order: 1; 
 
    } 
 
    #image1 { 
 
    display: block; 
 
    order: 2; 
 
    } 
 
    #image2 { 
 
    display: block; 
 
    order: 3; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="image1">Image 1</div> 
 
    <div id="image2">Image 2</div> 
 
    <div id="caption">Caption</div> 
 
</div>

點擊 「整頁」 按鈕來查看桌面版本。