How can I move a div from top to bottom on mobile layouts?

This can be achieved using CSS' flexbox.

• Add a new selector .col-xs-12 with the following properties:
  • display: flex; tells the children to use the flexbox model
  • flex-direction: column-reverse; will ensure that the children flow from bottom to top (instead of the default left to right)

Run the below Snippet in full screen and resize the window to see the order of the elements change.

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

A Bootstrap method

This can also be achieved using Bootstrap:

• Add the following classes to the container:
  • d-flex to make the container use flexbox
  • flex-column-reverse to order the children in reverse order on small screens
  • flex-sm-column to order the children in normal order on larger screens

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 d-flex flex-column-reverse flex-sm-column">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>

The following code works for me:

@media only screen and (max-width: 768px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12 xs-column-reverse">
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>
  </div>
</div>