Bootstrap column stacking on mobile

Question

Im trying to get the col-md-6 to stack below the col-md-4 on mobile but cant get it to work. Any advice how to achieve this would be great.

<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>

See this similar answer https://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout — Doug E Fresh, May 22 '17 at 14:53
I managed to find a solution by adding a class to the col-md-6 and floating it right. — Elliott Davidson, May 22 '17 at 14:55

score 2 · Accepted Answer · answered May 22 '17 at 14:53

You could look into using order property from utilizing flexbox. Check out the documentation here.

What you'd do is something like this:

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

Take a look at this codepen which will have a solution for you.

score 0 · Answer 2 · answered May 22 '17 at 14:52

Switch the order of the columns (mobile first) and then use Bootstrap's column ordering:

<div class="row">
    <div class="col-md-4 col-md-push-6 col-md-offset-1 col-xs-12 copyright-text">
      <p>Copyright © <?php echo date("Y"); ?> Elliott Davidson. All Rights Reserved.</p>
    </div>
    <div class="col-md-6 col-md-pull-4 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>

Bootply example

score 0 · Answer 3 · answered May 22 '17 at 14:56

0

You could do that with flex box. Add a class like this

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

Css

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

answered May 22 '17 at 14:56

Amir Shahbabaie

1,352
2
14
33

score 0 · Answer 4 · answered May 22 '17 at 14:56

I managed to find a solution by adding a class to the col-md-6 and floating it right.

<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

Bootstrap column stacking on mobile

4 Answers4