twitter-bootstrap - 如何使用 Bootstrap div 设计行跨度？

Question

如何使用 Bootstrap 设计网格系统？

在大中型显示器中，它将显示 2 列和 3 行。第一列将有 1 个单元格，第二列将有 3 个单元格。

在小型和超小型显示器中，它将仅显示 1 列和 4 行。每个单元格将一个接一个地堆叠在一个列中。大型或中型显示器的第一列/单元格应首先出现在此处。

Answer 1

尝试这个:

DEMO

       <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    First Column, First Cell
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, First Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Second Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Third Cell
                </div>
            </div>
        </div>