html - Twitter Bootstrap 网格 - 非传统的中断行为

Question

我想使用 Bootstrap 网格系统来实现以下目的:

-当屏幕宽度大于 col-lg-X 类的阈值时，则有 2 行 3 列，但是一旦屏幕宽度低于 col-lg-X 我希望这些列折叠分成 3 行 2 列。这可以用 Bootstrap 带网格实现吗？

When greater than the break threshold of col-lg-X:

X   X   X
X   X   X

when less than col-lg-X:

X   X
X   X
X   X

我开始的内容如下:

        <div class="row"> 
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[0] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[1] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[2] : ''}}"></img>
            </div>  
        </div>
        <div class="row">
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[4] : ''}}"></img>
            </div>
            <div class="col-sm-4 gallery-image">
                <img class="shadow" ng-src="{{$index == currentPage ? page.pics[5] : ''}}"></img>
            </div>
        </div>

我试图通过做这样的事情来变得狡猾，但显然 col-lg-6 只有在小于该阈值后才会中断。我

<div class="row">
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 gallery-image">
                    <div class="row">
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                        <div class="col-lg-6">
                            <img class="shadow" ng-src="{{$index == currentPage ? page.pics[3] : ''}}"></img>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

使用'md' 断点。它是lg 的下一个断点。

<div class="row">
<div class="col-lg-4 col-md-6">..

演示:http://codeply.com/go/fl5EE6jVFQ