如何在Bootstrap 3中重新排序列？

Question

我正在使用响应式网站并使用Bootstrap3。我已经附上了主页的布局。 对于移动版本，我需要重新排列各列。 我还附上了移动版本的所需布局。 请帮助我找出如何实现此移动版式。

Answer 1

您可以对javascript使用其他方法。 bootstrap中的visible和hidden classes也很好用。

HTML：

<div class="container-fluid" data-toggle="orderColumns" data-target=".column">
  <div class="row">
    <div class="col-xs-12 col-sm-6 column" data-position="0" data-lg-orderid="1" data-xs-orderid="2">
      <h1>
      A
      </h1>

    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="row">
        <div class="col-sm-12 column" data-position="1" data-lg-orderid="0" data-xs-orderid="0">
          <h1>
          B
          </h1>
        </div>
      <div class="col-sm-12 column" data-position="2" data-lg-orderid="2" data-xs-orderid="1">
          <h1>
          C
          </h1>
        </div>
      </div>

    </div>
  </div>

</div>

JS：

$(document).ready(function() {
    device = scanDevice();
  reorderColumns(device);
});

var reorderColumns = function(device) {
    $('*[data-toggle="orderColumns"]').each(function() {
    var ctx = $(this),
    columnsToOrder = ctx.attr('data-target'),
    columns = ctx.find(columnsToOrder),
    newOrder = [],
    orderId;

    $(columns).each(function() {
      orderId = $(this).attr('data-'+device+'-orderid');
            if(typeof orderId != 'undefined'){
            var elementObj = {
            id: orderId,
            html: $(this).html()
          }

          newOrder.push(elementObj);
      }

    })

    if(newOrder.length){
        $(newOrder).each(function(key,value){
        ctx.find('*[data-position="'+ value.id +'"]').html(value.html);
      })
    }

  });
}

var scanDevice = function() {
    var windowWdth = $(window).width();

  var device = 'lg';

  if(windowWdth < 768){
    device = 'xs';
  } else if(windowWdth >= 768 && windowWdth < 992) {
    device = 'sm';
  } else if(windowWdth >= 992 && windowWdth < 1200){
    device = 'md';
  }
  return device;
}

小提琴： https : //jsfiddle.net/coheafof/4/

Answer 2

最简单（也许不是最优雅）的方法是使用.hidden-xs和.vi​​sible-lg类。 这将使您可以完全控制移动设备和台式机的布局，但是这意味着复制代码。

请参阅http://getbootstrap.com/css/#sensitive-utilities