css – 用Twitter Bootstrap来响应地重新排序div?

前端之家收集整理的这篇文章主要介绍了css – 用Twitter Bootstrap来响应地重新排序div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在和 Twitter Bootstrap v3一起工作,希望能够使用 column orderingoffsetting对元素进行响应。

这是我如何使用我的元素。在-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 orderingoffsetting以正确的顺序获得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>

演示:http://bootply.com/77853

猜你在找的CSS相关文章