Question

所以，我有这个布局：

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

[所选区块的描述]

在移动设备上，它正确地折叠以使块彼此叠加，但是，我希望描述低于所选块

[Block 1]

[如果选择了Block 1，则说明]

[Block 2]

[Block 3]

[Block 4]

我想知道它是否只能使用bootstrap native css / js，或者我是否需要编写自己的javascript？

Answer 1

使用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'
  });
});

Answer 2

您可以尝试这样的事情：

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

bootstrap列/行重新排序

2 个答案: