Centering flex items on wrap with Bootstrap

Question

I have the following code with Bootstrap 4. There's a right item and several items located on the left:

---------------------------------------------------------------------
| item 1 item 2 item 3                                   Right item |
---------------------------------------------------------------------

When the screen becomes too small I would like them to be like this:

---------------------------------------------
|            item 1 item 2 item 3           |
|                 Right item                |
---------------------------------------------

This is almost what is happening... But instead I get:

---------------------------------------------
| item 1 item 2 item 3                       |
| Right item                                 |
---------------------------------------------

Here's the fiddle: https://jsfiddle.net/gax5n8qa/3/

How should I achieve this?

Answer 1

Center with flexbox only on smaller screen widths...

This way doesn't require using the grid, or adding extra classes to the child divs...

https://www.codeply.com/go/85w4qy1iIB

<container class="my-class 
                  d-flex 
                  align-items-center 
                  justify-content-center
                  justify-content-sm-between
                  flex-sm-row
                  flex-column
                  px-2">
    <div>
        <a class="pr-2">Item 1</a>
        <a class="px-2">Item 2</a>
        <a class="pl-2">Item 3</a>
    </div>
    <div>Right Item</div>
</container>

This works by using the flexbox utils responsively...

• justify-content-center - align horizontal center on xs (implied breakpoint)
• justify-content-sm-between - space between on sm and up
• flex-sm-row - direction row on sm and up
• flex-column - direction column (stacked) on xs

Answer 2

Use mr-auto and justify-content-center to container div.Resize the screen to check in both fiddle and snippet

.my-class {
  margin: 100px auto;
  background-color: lightgrey;
  height: 60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<Container class="my-class 
                  d-flex 
                  flex-wrap
                  align-items-center justify-content-center">
                  
                  
  
  
  <div class="col-auto mr-auto">
    <a class="pr-2">Item 1</a>
    <a class="px-2">Item 2</a>
    <a class="pl-2">Item 3</a>
  </div>
  <div class="col-auto">Right Item</div>
  
</Container>

https://jsfiddle.net/raj_mutant/gax5n8qa/33/