所以,我有此佈局:自舉列/行重新排序
[塊1] [塊2] [第3座] [塊4]
[所選塊的說明]
上移動,它正確地摺疊以具有在彼此的頂部上的塊,但,我想的描述是所選擇的塊下方
[塊1]
[描述如果塊1是選N]
[2座]
[3座]
[4座]
我想知道,如果有可能,只有引導本地的CSS/JS,或者我需要寫我自己的JavaScript?
所以,我有此佈局:自舉列/行重新排序
[塊1] [塊2] [第3座] [塊4]
[所選塊的說明]
上移動,它正確地摺疊以具有在彼此的頂部上的塊,但,我想的描述是所選擇的塊下方
[塊1]
[描述如果塊1是選N]
[2座]
[3座]
[4座]
我想知道,如果有可能,只有引導本地的CSS/JS,或者我需要寫我自己的JavaScript?
你可以嘗試這樣的事情:
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"));
}
})
爲了引導響應標籤使用Flatlogic Bootstrap Tabcollapse
檢查演示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'
});
});
你能提供小提琴?或者用你的代碼更新你的問題? –