CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bill Brasky
Bill Brasky

Reputation: 155

bootstrap column/row reordering

So, I have this layout:

[ Block 1] [Block 2] [Block 3] [Block4]

[ Description of chosen block ]

on Mobile , it properly collapses to have the blocks on top of each other, but, I want the description to be below the chosen block

[ Block 1 ]

[Description if Block 1 is chosen]

[ Block 2 ]

[ Block 3 ]

[ Block 4 ]

I wanted to know if it's possible with only bootstrap native css/js, or do i need to write my own javascript?

Upvotes: 1

Views: 90

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

To make bootstrap responsive tab use Flatlogic Bootstrap Tabcollapse

Check Demo Here

HTML:

<div>

  <!-- Nav tabs -->
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#Block1" aria-controls="Block1" role="tab" data-toggle="tab">Block 1</a></li>
    <li role="presentation"><a href="#Block2" aria-controls="Block2" role="tab" data-toggle="tab">Block 2</a></li>
    <li role="presentation"><a href="#Block3" aria-controls="Block3" role="tab" data-toggle="tab">Block 3</a></li>
    <li role="presentation"><a href="#Block4" aria-controls="Block4" role="tab" data-toggle="tab">Block 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Block1">Description if Block 1 is chosen</div>
    <div role="tabpanel" class="tab-pane" id="Block2">Description if Block 2 is chosen</div>
    <div role="tabpanel" class="tab-pane" id="Block3">Description if Block 3 is chosen</div>
    <div role="tabpanel" class="tab-pane" id="Block4">Description if Block 4 is chosen</div>
  </div>

</div>

JS:

$(document).ready(function() { 
  $('#myTab').tabCollapse({
    tabsClass: 'hidden-xs',
    accordionClass: 'visible-xs'
  });
});

Upvotes: 3

tejashsoni111
tejashsoni111

Reputation: 1405

You can try something like this :

JSFIDDLE : https://jsfiddle.net/tejashsoni111/fwogm5xp/

HTML : 

<div class="col-sm-3 block">

</div>
<div class="col-sm-3 block">

</div>
<div class="col-sm-3 block">

</div>
<div class="col-sm-3 block">

</div>
<div class="col-sm-12" id="chosen-block"></div>

JS :

jQuery(window).resize(function(){
    if(jQuery(window).width() < 768){
        jQuery(".block:first").after(jQuery("#chosen-block"));
    }else{
        jQuery(".block:last").after(jQuery("#chosen-block"));
    }
})

Upvotes: 2

Related Questions