How Can I Move A Div From Top To Bottom On Mobile Layouts?

I am using Bootstrap 4, but if it works on version 3, it should work on v4. I have 2 divs within a column like so:

Solution 1:

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.

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

<divclass="row"><divclass="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

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" /><divclass="row"><divclass="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>

Solution 2:

The following code works for me:

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

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

Solution 3:

.col-xs-12 { height: 200px; position:relative; }
.col-xs-12div { position:absolute; top:0; left: 0; width:100%; }
.col-xs-12div:last-child { top: auto; bottom: 0; }

@media (max-width: 480px) {
    .col-xs-12div { top:auto; bottom:0; }
    .col-xs-12div:last-child { top: 0; bottom: auto; }
}

Share