引导程序中不同大小的正方形的网格布局？

Question

我正在开发一个app（node-webkit），它在一种GridLayout中显示了一些正方形（tile）。瓷砖的尺寸都相同。单击获取时，双倍宽度和高度显示更多信息。 当一块瓷砖打开时，它目前看起来像这样。

我想要实现的是，获得与此类似的网格布局：

我使用Bootstrap v.3作为我的布局。当前的HTML看起来像这样：

<div class="form-group row tilecontainer ng-isolate-scope" ng-transclude="" delay="500">
        <!-- ngRepeat: info in project.infos -->
    <div class="tile ng-scope" ng-transclude="" ng-repeat="info in project.infos">
            <!-- ngInclude: undefined -->
        <ng-include src="'/html/templates/info_small.html'" class="ng-scope">
        <div class="sq-wrapper ng-scope col-xs-2 small" ng-class="open ? 'col-xs-4 medium' : 'col-xs-2 small'">
            <div class="info-small" ng-click="addInfoData(info, !open || active)" style="overflow:hidden; overflow-y: auto;">
                <!-- ===============
                    Small Look
                ================ -->
                <span class="info-title ng-binding" ng-click="toggle()" ng-hide="open || active">info1</span>


                <!-- ===============
                    Medium Look
                ================ -->
                <div ng-hide="!open || active" class="ng-hide">
                    <div class="row" ng-click="$event.stopPropagation();">
                        <input class="col-xs-8 col-xs-offset-2 label-input medium center ng-pristine ng-valid" style="text-decoration: underline;" ng-model="info.title">
                    </div>
                    <!-- ngRepeat: d in info.data --><div ng-repeat="d in info.data" class="row ng-scope" ng-click="$event.stopPropagation();">
                        <input class="col-xs-5 col-xs-offset-1 label-input ng-pristine ng-valid" ng-model="d.key" ng-blur="deleteDataIfEmpty(d, info.data)">
                        <input class="col-xs-5 label-input ng-pristine ng-valid" ng-model="d.value" ng-blur="deleteDataIfEmpty(d, info.data)">
                    </div><!-- end ngRepeat: d in info.data --><div ng-repeat="d in info.data" class="row ng-scope" ng-click="$event.stopPropagation();">
                        <input class="col-xs-5 col-xs-offset-1 label-input ng-pristine ng-valid" ng-model="d.key" ng-blur="deleteDataIfEmpty(d, info.data)">
                        <input class="col-xs-5 label-input ng-pristine ng-valid" ng-model="d.value" ng-blur="deleteDataIfEmpty(d, info.data)">
                    </div><!-- end ngRepeat: d in info.data -->

                    <div style="width:100%; height:5px;">
                    </div>
                </div>

                <!--
                -->
            </div>
        </div>
        </ng-include>
    </div>
    <!-- end ngRepeat: info in project.infos -->

Squares的风格来自：

.sq-wrapper {
    padding-bottom: 45%;
}

.sq-wrapper.small {
    padding-bottom: 15%;
}

.sq-wrapper.medium {
    padding-bottom: 30%;
}


.sq-wrapper > * {
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
    right: 15px;
}

.sq-wrapper.small .sq-wrapper.medium> * {
    position:absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
}

有人知道，如何将小瓷砖对齐成两排，同时用一种＆＃39; colspan = 2＆＃39;来展示大瓷砖。 ＆安培; ＆＃39;行跨度= 2＆＃39; ？