html - 如何对 bootstrap 3 中的列重新排序？

Question

我正在开发一个响应式网站并使用 bootstrap 3。我附上了主页的布局。对于移动版本，我需要对列重新排序。我还附上了移动版本的所需布局。请帮我弄清楚如何实现这种移动布局。

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

fiddle :https://jsfiddle.net/coheafof/4/