Css 移动设备上的Bootstrap列堆叠

我试图让col-md-6在手机上堆叠在col-md-4之下，但无法让它工作。任何关于如何实现这一点的建议都是非常好的

<footer>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-1 col-xs-12">
      <?php
          wp_nav_menu( array(
              'menu'              => 'footer',
              'theme_location'    => 'footer',
              'depth'             => 1,
              'container'         => 'div',
              'container_id'      => 'footer-nav',
              'menu_class'        => 'nav navbar-nav',
              'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'walker'            => new wp_bootstrap_navwalker())
          );
      ?>
    </div>
    <div class="col-md-4 col-xs-12 copyright-text">
      <p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
    </div>
  </div>
</div>

版权所有©Elliott Davidson。版权所有

---

切换列的顺序（先移动），然后使用：

版权所有©Elliott Davidson。版权所有

---

您可以通过使用

flexbox

来研究如何使用

order

属性。查看文档

你会这样做：

<div class="container">
  <div class="row flex">
    <div class="col-md-6 col-md-offset-1 col-xs-12 first">Div 1</div>
    <div class="col-md-4 col-xs-12 copyright-text second">Div2</div>
  </div>
</div>


/* Make sure to use all the proper prefixers */
/* Allow this to be up to mobile of 767px */
@media all and ( max-width: 767px ) {
    .flex { display: flex; }
    .first { order: 2; }
    .second { order: 1; }
}

第一组
第二组
/*确保使用所有正确的前缀*/
/*允许其最大移动容量为767px*/
@介质和全部（最大宽度：767px）{
.flex{display:flex；}
.第一{顺序：2；}
.第二{顺序：1；}
}

---

这将为您提供一个解决方案。

您可以使用flex box实现这一点。添加 像这样的班级

<div class="row flexible"></div>

---

我通过在col-md-6中添加一个类并将其正确浮动来找到解决方案

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-1 col-xs-12 footer-nav">
      <?php
          wp_nav_menu( array(
              'menu'              => 'footer',
              'theme_location'    => 'footer',
              'depth'             => 1,
              'container'         => 'div',
              'container_id'      => 'footer-nav',
              'menu_class'        => 'nav navbar-nav',
              'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'walker'            => new wp_bootstrap_navwalker())
          );
      ?>
    </div>
    <div class="col-md-4 col-xs-12 copyright-text">
      <p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
    </div>
  </div>
</div>

---

看到这个类似的答案了吗？我通过在col-md-6中添加一个类并将其正确浮动，找到了一个解决方案。

@media (max-width:480px){
.flexible{
display:flex;
}
.flexible div:nth-child(1){
order:1;
}
.flexible div:nth-child(2){
order:2;
}
}

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-1 col-xs-12 footer-nav">
      <?php
          wp_nav_menu( array(
              'menu'              => 'footer',
              'theme_location'    => 'footer',
              'depth'             => 1,
              'container'         => 'div',
              'container_id'      => 'footer-nav',
              'menu_class'        => 'nav navbar-nav',
              'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
              'walker'            => new wp_bootstrap_navwalker())
          );
      ?>
    </div>
    <div class="col-md-4 col-xs-12 copyright-text">
      <p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
    </div>
  </div>
</div>

.footer-nav
  float: right