2 Div並排=>屏幕最小=> 1下另一個

Question

我有2個DIVs並已將它們排列在一起。如果我最小化了我的屏幕（例如，如果屏幕寬度爲400px），我希望DIV在另一個之下對齊。

我該怎麼做？謝謝。

#parent { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
#section1 { 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 

 
#section2 { 
 
    width: 50%; 
 
    background-color: lightblue; 
 
}

<div id="parent"> 
 
    <div id="section1"> 
 
    Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1 
 
    </div> 
 
    <div id="section2"> 
 
    Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1 
 
    </div> 
 
</div>

Answer 1

使用媒體查詢

@media (max-width: 400px) { 
    #section1, #section2 { 
     width: 100%; 
    } 
} 

參考：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

您將要產生最大寬度媒體查詢：400像素。 CSS看起來像這樣：

@media (max-width: 400px) { 
    #parent { 
     display: block; 
    } 
} 

這是fiddle。