Bootstrap column stacking on mobile - css

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>

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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