4.auto margin wrap ordering

• mr-auto

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

• ml-auto

<div class="d-flex row-hl">
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="ml-auto p-2 item-hl">Flex item</div>
</div>

• mb-auto

<div class="d-flex flex-column row-hl">
    <div class="mb-auto p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
</div>

• mt-auto

<div class="d-flex flex-column row-hl">
    <div class="p-2 item-hl">Flex item</div>
    <div class="mt-auto p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
</div>

• no wrap

<div class="d-flex flex-nowrap row-hl">
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>

</div>

• wrap

<div class="d-flex flex-wrap row-hl">
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
    <div class="p-2 item-hl">Flex item</div>
</div>

• ordering

<div class="d-flex row-hl">
    <div class="order-3 p-2 item-hl">First flex item</div>
    <div class="order-2 p-2 item-hl">Second flex item</div>
    <div class="order-1 p-2 item-hl">Third flex item</div>
</div>