0

I have the following order in the desktop version:

<div class="row">
  <div class="col-md-7">
    Content 1
  </div>
  <div class="col-md-5">
    Content 2
  </div>
</div>

How can I make Content 2 appear first in mobile?

Paco Zevallos
  • 2,165
  • 7
  • 30
  • 68

2 Answers2

2

Use order-first and orader-md-0 classes for the content 2 column.

order-first orders the column first in the row. While order-md-0 resets the order of the column when the md breakpoint is reached.

There is no way to order the columns for mobile only because bootstrap has removed all the variants of *-xs-* classes. Therefore, you need to use both of classes. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 col-md-7">
    Content 1
  </div>
  <div class="col-12 order-first order-md-0 col-md-5">
    Content 2
  </div>
</div>

https://codepen.io/anon/pen/mKRVWN

You have not used col-* for small size screen. So I used col-12.

mahan
  • 12,366
  • 5
  • 48
  • 83
  • 1
    `col-12` isn't needed. It will stack automatically on smaller screens. See: https://getbootstrap.com/docs/4.1/layout/grid/#stacked-to-horizontal – Klooven Jun 09 '18 at 09:36
0

If you don't specifically have to use Bootstrap, then a simple flex layout will sort this.

There is a specific order option:

https://codepen.io/n8udd/pen/eKgONQ

n8udd
  • 657
  • 1
  • 9
  • 30