试图写屏幕尺寸为768px的@media屏幕iPad纵向视图，然后右栏堆放下来

Question

我正在设计与自举流体布局一起玩耍。这里是我的设计： http://www.getaveo.com/_bootstrap4/_delete.html

我：

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

，我想这样的事情发生......

的2 1）我想写@media屏幕，如果屏幕尺寸768px iPad纵向视图，然后：

右列，span3（红色）堆叠下来，并成为100％。 橙色柱，span6（橙色）向右或向右扩展或扩大。或span6变成span9。 左列，span3（灰色）保持不变。

，要么仅仅是这样的：

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

2）现在再次查看_delete HTML ...

充分利用您的浏览器窗口，像480像素宽或更小的小，跨度当前栈像这样：

gray 
orange 
red 

我想要做的是：如果屏幕尺寸是iPhone等山水景观480像素或更小，那么，顺序应该是：

orange 
gray 
red 

Answer 1

有几种不同的方法来解决这个..

1]响应的实用工具类

如果你只有这个用例为整个网站你可以使用.visible-tablet,.visible-phone等。类别explained here。这里的缺点是繁重的HTML，但做起来相当简单。工作示例：http://www.bootply.com/60542

2]使用jQuery/Javascript功能来监视窗口宽度

我你不介意的话，你可以使用jQuery相应地更改类非CSS的解决方案。 （您可能有window.width（跨浏览器问题）呢！）例如，

如果$（窗口）.WIDTH（）< 980）{

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

}; ...

3]使用@media查询重写引导CSS

例如此查询将改变您的.row流体.span6到.row流体.span9的宽度（在bootstrap.css中找到）

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