Replacement of a class of bootstrap 3 in bootstrap 4

Question

I want the replacement of classes col-sm-push-9 and col-sm-pull-3 of bootstrap-3 in bootstrap-4, can any one write classes in below html code in bootstrap 4?

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <title>Bootstrap 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-sm-push-9" style="border: 1px solid #ccc">
                Div 1
            </div>
            <div class="col-sm-9 col-sm-pull-3"  style="border: 1px solid #ccc">
                Div 2
            </div>
        </div>
    </div>
</body>
</html>

Possible duplicate of [Column ordering in Bootstrap 4 with push/pull and col-md-12](https://stackoverflow.com/questions/38247873/column-ordering-in-bootstrap-4-with-push-pull-and-col-md-12) — thibpat, Jun 27 '19 at 10:51

score 0 · Answer 1 · answered Jun 27 '19 at 10:49

In Bootstrap 4 you cans use class="order-md-**" for ordering your columns in a row.Please check the below snippet

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

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>

  <div class="container-fluid">

    <div class="row">
      <div class="col-md-6 order-md-12 border">column 1</div>
      <div class="col-md-6 order-md-1 border">column 2</div>
    </div>
  </div>

</body>

</html>

score 0 · Accepted Answer · answered Jun 27 '19 at 11:58

Basically this has been asked before. If you read the Bootstrap 4 docs you'll see that push pull are no longer used for column ordering. Instead use the column ordering classes.

<div class="container">
    <div class="row">
        <div class="col-sm-3 order-sm-last" style="border: 1px solid #ccc">
            Div 1
        </div>
        <div class="col-sm-9 order-sm-first" style="border: 1px solid #ccc">
            Div 2
        </div>
    </div>
</div>

https://www.codeply.com/go/6wcDwJR2Ex

Replacement of a class of bootstrap 3 in bootstrap 4

2 Answers2