我正在和
Twitter Bootstrap v3一起工作,希望能够使用
column ordering和
offsetting对元素进行响应。
这是我如何使用我的元素。在-xs或-sm断点处,将包含的div堆叠到一行:
在-md或-lg断点处,将包含的div堆叠成2行:
这是当前的代码 – 我知道如何在包含div上设置类,但不是在A,B和C上:
<div class="row"> <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="row"> <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div> <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div> <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div> </div> </div> ... more containing divs... </div>
我不知道如何使用Bootstrap 3的column ordering和offsetting以正确的顺序获得A,B和C.实际上是可能的吗?
这是我使用JSFiddle:http://jsfiddle.net/3vYgR/
解决方法
我想你想看看推拉课…
<div class="row"> <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div> <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div> <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div> </div>