网格系统 - 有可能吗？

Question

我的代码如下：

<div class="container">
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
</div>

1. 我想使用宽度为400px＆amp;的内容。高度：第1排/第1列300px
2. 我想使用宽度为400px＆amp;的内容。高度：第1行/第2列 600px
3. 我想使用宽度为400px＆amp;的内容。高度：第二排300px。

我想要第二个内容，宽度：400px＆amp;高度：600px将显示到第二行

Answer 1

这是你可以用bootstrap做的：

http://www.codeply.com/go/KaIvNu7qCT

看一下片段：

＆＃13;

＆＃13;

.wrp1 {
    background: orange;
    height: 25vw;
}
.wrp2 {
    background: teal;
    height: 25vw;
}
.wrp3 {
    background: tomato;
    height: 50vw;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12 wrp1">content1</div>    
                <div class="col-xs-12 wrp2">content2</div>    
            </div>    
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12 wrp3">content3</div>    
            </div>    
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;