knox-flaneur knox-flaneur - 1 year ago 152
CSS Question

How do you put an element above another in mobile view only?

I'm using Bootstrap 3.x and I have two divs of col-lg-6. Column X and Column Y.

On desktop view, Column X is on the left and Column Y is on the right.

How do I get it so that on smaller screen widths, Column Y is stacked above Column X?

Answer Source

I think that you can put column Y before column X and play with floating by using pull-right or pull-left. Take a look on the snippet below.

@media all and (max-width: 1000px) {
  .mobile .col-y {
    float: left !important;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container desktop">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

<div class="container mobile">
  <div class="col-xs-6 col-y pull-right">Y</div>
  <div class="col-xs-6">X</div>
</div>

You can also use just media query, without using pull-right. It's up to you and both variants are correct. I've used col-xs-6 because the preview window is small, you should customize that.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download