Define the order of vertical stacking of columns

Question

I want the div containing 1 to be on right on desktop but on top on mobile. Is there way to achieve that with bootstrap, preferably without using custom CSS?

<!DOCTYPE html>
<html lang="en">

<head>
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                2
            </div>
            <div class="col-sm-4">
                1
            </div>
        </div>
</body>

</html>

score 4 · Answer 1 · answered Dec 04 '18 at 04:15

You should use bootstrap order classes for maintaining order of your elements. Here is the live demo to your question -

Reordering Bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="container">
        <div class="row">
          <div class="col-md-6 order-md-2">
            <div class="card card-body bg-info">1st on mobile</div>
          </div>
          <div class="col-md-6">
            <div class="card card-body">2nd</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

score 2 · Accepted Answer · edited Dec 04 '18 at 12:11

There are a few ways that you can reorder the columns. I recommend you to use bootstrap 4 classes rather than custom CSS since you already use bootstrap.

In the HTML code, first write the columns that you want to position at the top on mobile. And use the order-sm-1 class. But i think it is better to use order-sm-last since it is more intuitive. In this particular case, they both function the same.

<!DOCTYPE html>
<html lang="en">

<head>
  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 order-sm-last bg-primary">
        First on mobile
      </div>
        <div class="col-sm-8 bg-danger">
        2 
      </div>
    </div>
  </div>
</body>

</html>

Maintain the order of columns as you have written and use order-last and order-sm-first for the first column.

<!DOCTYPE html>
<html lang="en">

<head>
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 order-last order-sm-first">
                2
            </div>
            <div class="col-sm-4">
                First on mobile
            </div>
        </div>
        </div>
</body>

</html>

Alternatively, you can use order-1 and order-sm-0

Define the order of vertical stacking of columns

2 Answers2