@nitro-ui/utility-flex

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Flex - Nitro UI</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="../dist/css/flex.min.css">  </head> <body class="bg-light"> <header class="bg-white border-bottom"> <div class="container py-5"> <h2 class="font-weight-bold mb-3">Flex</h2> <div class="text-muted">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.</div> </div> </header> <article> <div class="container py-2"> <section class="my-3"> <h4 class="text-secondary">u-flex</h4> <div class="bg-white border p-1"> <div class="u-flex bg-secondary text-white p-2">I am flexbox container</div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-inline-flex</h4> <div class="bg-white border p-1"> <div class="u-inline-flex bg-secondary text-white p-2">I am inline flexbox container</div> </div> </section> <h2 class="mt-5">Direction</h2> <section class="my-3"> <h4 class="text-secondary">u-flex--row</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--row"> <div class="bg-secondary text-white p-2 mr-1">Flex item 1</div> <div class="bg-secondary text-white p-2 mr-1">Flex item 2</div> <div class="bg-secondary text-white p-2 mr-1">Flex item 3</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--row-reverse</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--row-reverse"> <div class="bg-secondary text-white p-2 mr-1">Flex item 1</div> <div class="bg-secondary text-white p-2 mr-1">Flex item 2</div> <div class="bg-secondary text-white p-2 mr-1">Flex item 3</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--column</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--column"> <div class="bg-secondary text-white p-2 mb-1">Flex item 1</div> <div class="bg-secondary text-white p-2 mb-1">Flex item 2</div> <div class="bg-secondary text-white p-2 mb-1">Flex item 3</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--column-reverse</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--column-reverse"> <div class="bg-secondary text-white p-2 mb-1">Flex item 1</div> <div class="bg-secondary text-white p-2 mb-1">Flex item 2</div> <div class="bg-secondary text-white p-2 mb-1">Flex item 3</div> </div> </div> </section> <h2 class="mt-5">Wrap</h2> <section class="my-3"> <h4 class="text-secondary">u-flex--nowrap</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--nowrap"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--wrap</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--wrap"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--wrap-reverse</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--wrap-reverse"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Justify Content</h2> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-start</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-start"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-end</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-end"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-center</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-center"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-between</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-between"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-around</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-around"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--justify-evenly</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--justify-evenly"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Align items</h2> <section class="my-3"> <h4 class="text-secondary">u-flex--items-start</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--items-start" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--items-end</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--items-end" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--items-center</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--items-center" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--items-baseline</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--items-baseline" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--items-stretch</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--items-stretch" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Align Content</h2> <section class="my-3"> <h4 class="text-secondary">u-flex--content-start</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-start u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--content-end</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-end u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--content-center</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-center u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--content-between</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-between u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--content-around</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-around u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex--content-stretch</h4> <div class="bg-white border p-1"> <div class="u-flex u-flex--content-stretch u-flex--wrap" style="height: 180px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h1>Flex Child Property</h1> <h2 class="mt-5">Align Self</h2> <section class="my-3"> <h4 class="text-secondary">u-flex__self-auto</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-auto bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__self-start</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-start bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__self-end</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-end bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__self-center</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-center bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__self-baseline</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-baseline bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__self-stretch</h4> <div class="bg-white border p-1"> <div class="u-flex" style="height: 100px;"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__self-stretch bg-secondary text-white p-2 border border-light">Aligned flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Fill</h2> <section class="my-3"> <h4 class="text-secondary">u-flex__fill</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="u-flex__fill bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__fill bg-secondary text-white p-2 border border-light">Filled flex item with lot of content</div> <div class="u-flex__fill bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Grow and Shrink</h2> <section class="my-3"> <h4 class="text-secondary">u-flex__grow-1</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="u-flex__grow-1 bg-secondary text-white p-2 border border-light">Grow flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">u-flex__shrink-1</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="w-100 bg-secondary text-white p-2 border border-light">Flex item</div> <div class="u-flex__shrink-1 bg-secondary text-white p-2 border border-light">Flex item shrinked</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Auto Margins</h2> <section class="my-3"> <h4 class="text-secondary">normal margins</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">margin right auto</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="mr-auto bg-secondary text-white p-2 border border-light">Flex item Right auto</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">margin right auto</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="ml-auto bg-secondary text-white p-2 border border-light">Flex item left auto</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> <div class="bg-secondary text-white p-2 border border-light">Flex item</div> </div> </div> </section> <h2 class="mt-5">Flex order</h2> <section class="my-3"> <h4 class="text-secondary">Order first last</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="bg-secondary text-white p-2 border border-light">Flex order</div> <div class="u-order-first bg-secondary text-white p-2 border border-light">Flex order first</div> <div class="bg-secondary text-white p-2 border border-light">Flex order</div> <div class="bg-secondary text-white p-2 border border-light">Flex order</div> <div class="u-order-last bg-secondary text-white p-2 border border-light">Flex order last</div> <div class="bg-secondary text-white p-2 border border-light">Flex order</div> </div> </div> </section> <section class="my-3"> <h4 class="text-secondary">Order 1-12</h4> <div class="bg-white border p-1"> <div class="u-flex"> <div class="u-order-4 bg-secondary text-white p-2 border border-light">order 4</div> <div class="u-order-5 bg-secondary text-white p-2 border border-light">order 5</div> <div class="u-order-6 bg-secondary text-white p-2 border border-light">order 6</div> <div class="u-order-1 bg-secondary text-white p-2 border border-light">order 1</div> <div class="u-order-2 bg-secondary text-white p-2 border border-light">order 2</div> <div class="u-order-3 bg-secondary text-white p-2 border border-light">order 3</div> <div class="u-order-7 bg-secondary text-white p-2 border border-light">order 7</div> <div class="u-order-8 bg-secondary text-white p-2 border border-light">order 8</div> <div class="u-order-10 bg-secondary text-white p-2 border border-light">order 10</div> <div class="u-order-11 bg-secondary text-white p-2 border border-light">order 11</div> <div class="u-order-12 bg-secondary text-white p-2 border border-light">order 12</div> <div class="u-order-9 bg-secondary text-white p-2 border border-light">order 9</div> </div> </div> </section> </div> </article> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>