javascript - 响应式三列重新堆叠

Question

我想知道这是否有可能使用最少数量的 javascript 或 jQuery。

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

HTML:

<header></header>
<nav></nav>
<div class="container">
   <div class="container-fluid">
      <div class="col-ms-3" id="colA"></div>
      <div class="col-md-6" id="colB"></div>
      <div class="col-md-3" id="colC"></div>
   </div>
</div>
<footer></footer>

作为一个 Bootstrap child ，一切都很好，很花花公子。但我想知道是否有方法可以在手机上查看此内容时，所有内容都收缩到一个列中，以便中心列 (colB) 出现在顶部，而不是在 colA 和 colC 之间

Answer 1

您可以将 css flexbox 与媒体查询结合使用 这是一个很好的教程的链接http://css-tricks.com/snippets/css/a-guide-to-flexbox/