Question

我对bootstrap的网格模型有疑问。我有一行包含三个div，这就是我希望它在不同视图中查看的方式。

移动：

all divs with xs-col-12 
div2 on top
div1 second 
div3 last

片剂：

div1 col-sm-6 left (this is the main content)
div2 col-sm-6 right top
div3 col-sm-6 right bottom

桌面：

div1 col-md-8 left (Still the main content)
div2 col-md-4 right top
div3 col-md-4 right bottom

Div1是页面上的主要内容，div2和3是侧面菜单。

下面的代码是我得到的..

.div1{  
	background-color: red;
	height: 800px;
}
.div2{
	background-color: blue;
    height: 200px;
}
.div3{
	height: 200px;
	background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
		
	<div class="div2 col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-8">div2</div>
	<div class="div1 col-xs-12 col-sm-6 col-sm-pull-6 col-md-8 col-md-pull-4">div1</div>
	<div class="div3 col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-8">div3</div>

Answer 1

要获得所需的订单而不更改标记，我相信您需要将div 2和3向右浮动，这需要自定义媒体查询。（虽然你可以添加它们，但我从来没有见过像col-md-right，col-sm-left这样的强化课程。）

Fiddle

@media (min-width: 768px) {
    div.div1{
        float: left;
        right: 0;
    }
    div.div2 {
        float: right;
        left: 0;
    }
    div.div3 {
        float: right;
        left: 0;
    }
}

使用bootstrap行和col的推拉在网页上订购内容

1 个答案: