Simple grid based in flexbox. Botstrap 4 compatible.
<div class="container column">
<div class="col-1">1</div>
<div class="col-2">2</div>
<div class="col-3">3</div>
<div class="col-4">4</div>
<div class="col-5">5</div>
<div class="col-6">6</div>
<div class="col-7">7</div>
<div class="col-8">8</div>
<div class="col-9">9</div>
<div class="col-10">10</div>
<div class="col-11">11</div>
<div class="col-12">12</div>
</div>
<div class="container column">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">1</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">2</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">3</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">4</div>
<div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">5</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">6</div>
<div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7">7</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">8</div>
<div class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9">9</div>
<div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">10</div>
<div class="col-11 col-sm-11 col-md-11 col-lg-11 col-xl-11">11</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">12</div>
</div>
<div class="container">
<div class="col-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">1</div>
</div>
<div class="container column">
<div class="col-1 col-xl-1 order-xl-1 order-sm-12 order-12">1</div>
<div class="col-2 col-xl-2 order-xl-2 order-sm-11 order-11">2</div>
<div class="col-3 col-xl-3 order-xl-3 order-sm-10 order-10">3</div>
<div class="col-4 col-xl-4 order-xl-4 order-sm-9 order-9">4</div>
<div class="col-5 col-xl-5 order-xl-5 order-sm-8 order-8">5</div>
<div class="col-6 col-xl-6 order-xl-6 order-sm-7 order-7">6</div>
<div class="col-7 col-xl-7 order-xl-7 order-sm-6 order-6">7</div>
<div class="col-8 col-xl-8 order-xl-8 order-sm-5 order-5">8</div>
<div class="col-9 col-xl-9 order-xl-9 order-sm-4 order-4">9</div>
<div class="col-10 col-xl-10 order-xl-10 order-sm-3 order-3">10</div>
<div class="col-11 col-xl-11 order-xl-11 order-sm-2 order-2">11</div>
<div class="col-12 col-xl-12 order-xl-12 order-sm-1 order-1">12</div>
</div>
<div class="container">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container row-reverse">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container column">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container column-reverse">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container wrap">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container no-wrap">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container justify-content-start">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container justify-content-center">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container justify-content-end">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container justify-content-between">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container justify-content-around">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-start">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-center">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-end">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-baseline">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-stretch">
<div class="">1</div>
<div class="">2</div>
</div>
<div class="container align-items-center">
<div class="">1</div>
<div class="align-self-start">2</div>
<div class="align-self-center">3</div>
<div class="align-self-end">4</div>
<div class="align-self-stretch">5</div>
</div>
<div class="container">
<div class="flex-grow-1">1</div>
</div>
<div class="container">
<div class="flex-grow-1">1</div>
<div class="flex-grow-1">2</div>
</div>
<div class="container">
<div class="flex-grow-1">1</div>
<div class="flex-grow-5">2</div>
</div>
<div class="container wrap">
<div class="flex-grow-1">1</div>
<div class="flex-grow-2">2</div>
<div class="flex-grow-3">3</div>
<div class="flex-grow-4">4</div>
<div class="flex-grow-5">5</div>
</div>
<div class="container wrap">
<div class="flex-basis-100">1</div>
<div class="flex-basis-200">2</div>
<div class="flex-basis-300">3</div>
</div>
<div class="container wrap">
<div class="flex-basis-100">1</div>
<div class="flex-basis-200">2</div>
<div class="flex-basis-300 flex-grow-1">3</div>
</div>
<div class="container wrap column">
<div class="flex-basis-100">1</div>
<div class="flex-basis-200">2</div>
<div class="flex-basis-300 flex-grow-1">3</div>
</div>
<div class="container">
<div class="flex-basis-100">1</div>
</div>
<div class="container">
<div class="flex-basis-200">2</div>
</div>
<div class="container">
<div class="flex-basis-300">3</div>
</div>
<div class="container">
<div class="flex-basis-400">4</div>
</div>
<div class="container">
<div class="flex-basis-500">5</div>
</div>
<div class="container">
<div class="flex-basis-600">6</div>
</div>
<div class="container">
<div class="flex-basis-700">7</div>
</div>
<div class="container">
<div class="flex-basis-800">8</div>
</div>
<div class="container">
<div class="flex-basis-900">9</div>
</div>
<div class="container">
<div class="flex-basis-1000">10</div>
</div>
<div class="container">
<div class="flex-basis-1100">11</div>
</div>
<div class="container">
<div class="flex-basis-1200">12</div>
</div>