Bootstrap4で正しく要素を順序付けしないでください

次のコードでは、解像度がsmまたはxsの場合、SmallおよびLarge HTML要素の位置を入れ替える必要があります。 pull-とpush-を追加すると、レイアウトが凶暴になります。 push-とpull-を使用する正しい方法は何ですか？あなたは、最新バージョンを使用している場合はBootstrap4で正しく要素を順序付けしないでください

<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> 
       <div class="alert alert-success"> 
        Hello World 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
<!-- div class="col-xs-6 pull-xs-12 col-md-3 -- This doesn't work> 
      <div class="col-xs-6 col-md-3"> 
       <div class="row"> 
        <div class="col-md-12"><h5>Small</h5></div> 
       </div> 
       <div class="row"> 
        <div class="col-md-4">sm1</div> 
        <div class="col-md-4">sm2</div> 
        <div class="col-md-4">sm3</div> 
       </div> 
      </div> 
      <div class="col-xs-6 col-md-3"> 
       <div class="row"> 
        <div class="col-md-12"><h5>Medium</h5></div> 
       </div> 
       <div class="row"> 
        <div class="col-md-4">md1</div> 
        <div class="col-md-4">md2</div> 
        <div class="col-md-4">md3</div> 
       </div> 
      </div> 

      <div class="col-xs-6 col-md-3"> 
       <div class="row"> 
        <div class="col-md-12"><h5>Large</h5></div> 
       </div> 
       <div class="row"> 
        <div class="col-md-4">lg1</div> 
        <div class="col-md-4">lg2</div> 
        <div class="col-md-4">lg3</div> 
       </div> 
      </div> 
<!-- div class="col-xs-6 push-xs-12 col-md-3 -- This doesn't work> 
      <div class="col-xs-6 col-md-3"> 
       <div class="row"> 
        <div class="col-md-12"><h5>X-Large</h5></div> 
       </div> 
       <div class="row"> 
        <div class="col-md-4">xl1</div> 
        <div class="col-md-4">xl2</div> 
        <div class="col-md-4">xl3</div> 
       </div> 
      </div> 
     </div> 
    </div>  
    <div>I am free</div> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bower_components/tether/dist/js/tether.min.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
</body>

出典

2017-11-17 Manu Chadha