Bootstrap 4 - using Flexbox with responsive columns

Question

I am trying to make a row with buttons positioned at the beginning of the row and at the end. Here are two images. First when the Browser is maximized:

The second is after I resized the Browser:

For that I am implementing the following code:

<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

Just to learn how to use Flexbox with B4. The code does position items correctly, but when I resize it the columns dont stack up.

Any idea how to make it fully responsive?

Thanks for the help.

Answer 1

The flex-row and flex-column classes can also be used responsively. You could use flex-sm-row to keep the row horizontal on sm and up, then flex-column to stack vertically on xs screen widths...

<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