重新排序divs响应与Twitter Bootstrap？ [英] Reordering divs responsively with Twitter Bootstrap?

问题描述

我正在使用和 offsetting 。是真的可能吗？

这是我已经使用JSFiddle： http://jsfiddle.net/3vYgR/

解决方案

我想你想看看 push 和拉类...

 < 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> 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 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> C< / div> 
< / div> 
  

演示： http： /bootply.com/77853

I am working with Twitter Bootstrap v3 and want to reorder elements responsively, using column ordering and offsetting.

This is how I would like to use my elements. At -xs or -sm breakpoints, with the containing div stacked 4 to a row:

At -md or -lg breakpoints, with the containing div stacked 2 to a row:

This is the current code - I know how to set the classes on the containing div, but not on A, B and 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>

I can't figure out how to get A, B and C in the right order with Bootstrap 3's column ordering and offsetting. Is it actually possible?

This is as far as I've got using JSFiddle: http://jsfiddle.net/3vYgR/

解决方案

I think you want to look at the push and pull classes...

<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>

Demo: http://bootply.com/77853

这篇关于重新排序divs响应与Twitter Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！