Bootstrap Spalte/Zeile

Question

Neuordnen

So habe ich dieses Layout:

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

[Beschreibung des ausgewählten Blocks]

auf Mobil es kollabiert richtig die Blöcke auf der jeweils anderen haben, aber ich die Beschreibung soll unter dem gewählten Block

[Block 1]

[Beschreibung, wenn Block 1 ist gewählt n]

[Block 2]

[Block 3]

[Block 4]

wollte ich wissen, ob es möglich ist, mit nur Bootstrap nativen css/js oder muss ich schreibe mein eigenes Javascript?

Answer 1

Sie können so etwas wie dies versuchen:

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

Answer 2

Um Bootstrap ansprechende Registerkarte Verwendung Flatlogic Bootstrap Tabcollapse

prüfen 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' 
    }); 
});