ブートストラップv4のプッシュプルは、ブートストラップv4の最新情報を見てみると

Question

を行って：

https://getbootstrap.com/docs/4.0/migration/#grid-system-1

...ドロッププッシュして、新しいフレキシボックス搭載のためクラスの修飾クラスを引っ張ります。たとえば、.col-8.push-4と.col-4.pull-8の代わりに.col-8.order-2と.col-4.order-1を使用します。

しかし、注文機能を使用すると、プッシュプル方法と同じように機能しないようです。これは、下のコードの最初の行と同様に行をスタックします。

私の目標は、左側にimgを、右側にテキストを、左側にテキストを置き、デスクトップの次の行の右側にimgを置くことです。小さな画面でサイズを変更すると、各画像がテキストの上に重ねて表示されます。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <!--img--> 
     </div> 
     <div class="col-md-8"> 
      <!--text--> 
     </div> 
    </div> 
     <div class="row"> 
      <div class="col-md-8 order-2"> 
       <!--text--> 
      </div> 
      <div class="col-md-4 order-1"> 
       <!--img--> 
      </div> 
     </div> 
</div> 

Answer 1

あなたはmdに例えば順序を変更したい場合は、そのサイズのための最初の通常の順序を定義し、すべての小さいサイズのorder-nことができます。したがって、コードはこのようになります。代わりに、 `push`と`新しいブートストラップ-4ベータv2はorder`代わりに `使用pull`の

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     img 
 
    </div> 
 
    <div class="col-md-8"> 
 
     text 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-8 order-2 order-md-1"> 
 
     text 
 
    </div> 
 
    <div class="col-md-4 order-1 order-md-2"> 
 
     img 
 
    </div> 
 
    </div> 
 
</div>