html - 引导列/行重新排序

所以，我有这样的布局：
[第1区][第2区][第3区][第4区]
[所选块的说明]
在Mobile上，如果块在彼此上面，它会适当地折叠，但是，我希望描述低于所选的块
[方框1]
[选择块1时的说明]
[方框2]
[方框3]
[方框4]
我想知道是否只有bootstrap本地css/js是可行的，还是需要编写自己的javascript？

最佳答案

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

关于html - 引导列/行重新排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40123942/