ブートストラップv4のプッシュと

Question

ので、私はこのトピック読んでいる引っ張る：Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

をしかし、私はまだいくつかの問題を抱えて：（私はそれを少し

私のコードを短くしているが、私は何も考えてないし重要なのは）欠落しています。

<div class="row justify-content-center"> 
     <div class="col-lg-8 col-md-12"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
     </div> 
    <div class="col-lg-4 col-md-10 justify-content-center" > 
     /*My login div*/ 
    </div> 

だから、私は起こるしたいもの：小さな画面上で私は私のLogin divが画面とほぼ同じ幅でありたいです（10/12と中心に）、PLUS私はそれがテキストの前に、画面の上に浮かんでいます。私はpull-sm-12のようなものを私のLogin divに追加して​​3210のようなものを私のText divに追加しなければならないと思っていますが、動作しません。

Answer 1

ブートストラップ4はフルフレックスボックスモデルに移行しているため、プッシュ/プルユーティリティはもはやありません。それらは"order" utilitiesに置き換えられます。 （ヒント：ドキュメントの期限が切れているようですが、ドキュメントのクラス名がorderで始まっていても、実際にはflexで始まります。flex-firstではなく、order-firstです）とにかく、あなたの記述に基づいて、ほとんどあなたがそこにいるでしょう。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="d-flex flex-sm-wrap flex-md-nowrap justify-content-sm-center justify-content-md-start"> 
 
    <div class="flex-sm-last flex-md-unordered"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
 
    </div> 
 
    <div class="flex-sm-first flex-md-unordered" > 
 
     Login box 
 
    </div> 
 
</div>

残念ながら、スタックオーバーフローのスニペット機能は、本当にあなたが応答性と遊ぶことはできません。それは明らかに定義された幅です。あなたはそのコードをどこか別の場所にコピーして、それを使って遊ぶべきです。