<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="d-flex flex-nowrap"> <div class="flex-last p-2">First flex item</div> <div class="p-2">Second flex item</div> <div class="flex-first p-2">Third flex item</div> </div> <div class="d-flex flex-row flex-wrap"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> <div class="p-2">Flex item 3</div> </div> <div class="d-flex flex-row-reverse"> <div class="p-2">Flex item 1</div> <div class="p-2">Flex item 2</div> <div class="p-2">Flex item 3</div> </div>

.d-flex div{ background-color:#eee; margin:1px; }