How to reorder columns in bootstrap 3?

Question

I'm working on a responsive website and using bootstrap 3. I have attached the layout of the home page. For the mobile version, I need to reorder the columns. I have also attached the desired layout of the mobile version. Please help me to figure out how to achieve this mobile layout.

Answer 1

You can use a different approach with javascript . Also the visible and hidden classes from bootstrap are good to use.

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/

Answer 2

The easiest (perhaps not most elegant) way to achieve this is using the .hidden-xs and .visible-lg classes. This will give you full control of the layout for mobile and desktop, but will mean duplicating the code.

See http://getbootstrap.com/css/#responsive-utilities