Javascript 响应式三柱回座

我想知道，用最少的javascript或jQuery是否就可以做到这一点

我有一个三列布局：colA、colB、colC，上面有页眉和导航，下面有页脚

HTML:

---

作为一个自助式的孩子，一切都很好。但我想知道的是，在手机上查看时，是否有其他方法，在手机上查看时，所有内容都收缩到一列，因此中间列（colB）显示在顶部，而不是在colA和colC之间，您可以将css flexbox与Mediaqueries结合使用
这里是一个好教程的链接

---

实际上，只需少量的HTML就可以做到这一点。Bootstrap有一些内置类，根据当前屏幕分辨率显示或隐藏元素。比如说,

<div class="visible-xs hidden-sm hidden-md hidden-lg">
  // Content
</div>

这将呈现2个仅以不同屏幕分辨率显示和重新排列的元素。请参见此示例以了解我的意思：

---

希望能给你一些启示

引导框架本身已经具备了实现这一点所需的一切，而无需借助flexbox、额外的媒体查询或复制内容

首先，Bootstrap被设计为mobilefirst，所以创建您希望在断点处显示的布局

<div class="container">
   <div class="col-xs-12" id="colB"></div>
   <div class="col-xs-12" id="colA"></div>
   <div class="col-xs-12" id="colC"></div>
</div>

更多信息可在此处找到：

此外，在

.container

内还有一个

.container fluid

。除了给你额外的15像素左右的填充之外，这没有什么实际的效果。我把它从我的例子中删除了

---

下面是一个活生生的例子：

就是这样做的。。。非常感谢。只需将flex-direction设置为column，并将media-max-width设置为400px，每个子级的顺序就可以了。非常感谢。

<div class="container-fluid hidden-xs visible-sm visible-md visible-lg">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3" id="colA">A</div>
    <div class="col-lg-6 col-md-6 col-sm-6" id="colB">B</div>
    <div class="col-lg-3 col-md-3 col-sm-3" id="colC">C</div>
  </div>
</div>
<div class="container-fluid visible-xs hidden-sm hidden-md hidden-lg">
  <div class="row">
    <div class="col-xs-12" id="colB">B</div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="colA">A</div>
  </div>
  <div class="row">
    <div class="col-xs-12" id="colC">C</div>
  </div>
</div>

<div class="container">
   <div class="col-xs-12" id="colB"></div>
   <div class="col-xs-12" id="colA"></div>
   <div class="col-xs-12" id="colC"></div>
</div>

<div class="container">
   <div class="col-xs-12 col-sm-6 col-sm-push-3" id="colB"></div>
   <div class="col-xs-12 col-sm-3 col-sm-pull-6" id="colA"></div>
   <div class="col-xs-12 col-sm-3" id="colC"></div>
</div>