如果屏幕尺寸為768px iPad縱向視圖，則嘗試寫入@media屏幕，然后將右列向下堆疊

Question

我正在設計引導流體布局。 這是我的設計： http : //www.getaveo.com/_bootstrap4/_delete.html

我有：

span3 (gray)
span6 (orange)
span3 (red)

我希望發生這種情況...

1/2）如果屏幕尺寸為768px iPad縱向視圖，我嘗試編寫@media屏幕，然后：

右列，span3（紅色）向下堆疊，並變為100％。 橙色列span6（橙色）向右邊緣擴展或擴大。 或span6變為span9。 左列，span3（灰色）保持不變。

或變成這樣：

http://www.getaveo.com/_bootstrap4/_delete2.html

2）現在再次查看_delete html ...

使您的瀏覽器窗口更小，例如480像素或更寬，當前范圍跨度如下所示：

gray
orange
red

我想做的是：如果屏幕大小像iphone橫向視圖480px或更小，那么順序應該是：

orange
gray
red

Answer 1

有幾種解決方法。

1]響應實用程序類

如果你只有這個用例為整個網站，你可以使用.visible-tablet ， .visible-phone等。班在這里解釋 。 不利之處在於繁瑣的HTML，但是這樣做很簡單。 工作示例： http : //www.bootply.com/60542

2]使用jQuery / Javascript監視窗口寬度

我是不介意使用非CSS解決方案的人，可以使用jQuery來相應地更改類。 （您也可能在window.width（）中遇到跨瀏覽器的問題！）例如，

如果$（window）.width（）<980）{

  $('#myRow').removeClass('span6').addClass('span9'); 

}; ...

3]使用@media查詢覆蓋Bootstrap CSS

例如，此查詢會將您的.row-fluid .span6更改為.row-fluid .span9的寬度（位於bootstrap.css中）

@media (max-width: 979px) and (min-width: 768px) { /*tablet*/
    .row-fluid .span6 {
    width: 74.46808510638297%; 
    }
}