ブートストラップ4 - レスポンシブコラムでフレックスボックスを使用する

Question

私は、行の始めと終わりにボタンを配置して行を作成しようとしています。ここには2つの画像があります。ブラウザが最大化されたときに最初に：

<div class="d-flex justify-content-end"> 
    <div class="mr-auto p-2">Flex item 1</div> 
    <div class="p-2">Flex item 2</div> 
</div> 

Fiddle

：そのために

私は、次のコードを実装しています：

二つ目は、私は、ブラウザのサイズを変更した後で

B4でFlexboxを使用する方法を学ぶだけです。コードはアイテムを正しく配置しますが、サイズを変更すると列がスタックされません。

これを完全に反応させるにはどうすればよいですか？

ありがとうございます。

Answer 1

flex-rowおよびflex-columnクラスも応答して使用できます。あなたは... xs画面幅に縦に積み重ねることが、その後、SM上で、最大水平flex-columnを行を保つためにflex-sm-rowを使用することができ

<div class="d-flex flex-sm-row flex-column"> 
    <div class="mr-auto p-2">Flex item 1</div> 
    <div class="p-2">Flex item 2</div> 
</div> 

http://www.codeply.com/go/G3Z6OLCBtF