Bootstrap 4 - 使用具有響應列的Flexbox

Question

我正在嘗試使按鈕位於行的開頭和結尾處。這裏有兩個圖像。首先，當瀏覽器最大化：

第二個是後我調整瀏覽器：

對於我在執行下面的代碼：

<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

只爲了解如何將Flexbox與B4一起使用。代碼可以正確定位項目，但是當我調整它的大小時，列不會堆疊起來。

任何想法如何使其充分響應？

感謝您的幫助。

Answer 1

flex-row和flex-column類也可以被響應地使用。你可以使用flex-sm-row保留該行水平上的SM和起來，然後flex-column對xs屏幕寬度垂直堆疊...

<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