並排兩個div，但如果屏幕太小，則強制右側div保留在左側div上

Question

問題標題幾乎總結了它。我想知道是否有可能有兩個div並排，如：

DIV＃1 | DIV＃2

不過，如果屏幕太小（例如在移動設備上），我想這樣的事情發生：

DIV＃2

DIV＃1

也就是說，DIV＃1滑動而不是向下DIV＃2

乾杯， 本。

Answer 1

你可能使用的div浮動彼此相鄰坐下。當屏幕太小時，使用@ media-queries更改此行爲。在你的CSS文件：

@media only screen and (max-width: 480px) { 
    /* when window size is below 480px */ 
    div { 
     float: none; 
    } 
} 

這只是將浴液的例子：沒有到您的網站上所有div如果窗口大小小於480像素較小;調整它實現你想要的東西:)

Answer 2

您可以使用CSS媒體查詢來檢查定位中的屏幕大小。

例如，正常的CSS只會將兩個元素左移，而您的320px樣式會將它們設置爲非浮動。

您可以使用最小寬度和最大寬度指令檢查此

<link rel='stylesheet' media='screen and (min-width: 401px) and (max-width: 900px)' href='css/medium.css' /> 

這裏更多的細節 - http://css-tricks.com/css-media-queries/