/* Greatly inspired by Frow https://github.com/Beg-in/frow */
.row,
[class*="row-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px; /* Gutters */
    margin-right: -15px; /* Gutters */
}

.row > *,
[class*="row-"] > * {
    max-width: 100%;
    width: 100%;
    padding-left: 15px; /* Gutters */
    padding-right: 15px; /* Gutters */
}

@media (min-width: 992px) { /* Only on desktop by default */
    .row,
    [class*="row-"] {
        justify-content: start;
    }
    /* Only on unstyled col in unstyled row 
       That way, unstyled col in styled rows will adapt */
    .row > * { 
        flex: 1 1 auto;
        width: auto;
    }

    .row-1 > * { width: 100%; }
    .row-2 > * { width: 50%; }
    .row-3 > * { width: 33.33%; }
    .row-4 > * { width: 25%; }
    .row-5 > * { width: 20%; }
    .row-6 > * { width: 16.66%; }
    .row-7 > * { width: 14.28%; }
    .row-8 > * { width: 12.5%; }
    .row-9 > * { width: 11.11%; }
    .row-10 > * { width: 10%; }
    .row-11 > * { width: 9.09%; }
    .row-12 > * { width: 8.33%; }

    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33%; }
    .col-8 { width: 66.66%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33%; }
    .col-11 { width: 91.66%; }
    .col-12 { width: 100%; }
}

So you can add columns without class:

<div class="row">
    <div></div>
    <div></div>
</div>

Or, you can specify the number of columns with .row-*:

<div class="row-2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

(will output 2 columns of 3 items)

Or, you can specify the width of each item with .col-*:

<div class="row-12">
    <div class="col-6"></div>
    <div class="col-2"></div>
    <div></div> <!-- Automagically fill -->
    <div class="col-1"></div>
</div>

By default, will be displayed as a single column on mobile and tablets.

@media screen and (max-width:800px) {
    td, 
    th {
        display: block;
    }
}

Or, with flexbox:

@media screen and (max-width: 800px) {
    tr {
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    td, 
    th {
        flex: 1 1 10%;
        text-align: center;
    }

}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

input {
    margin:5px;
    flex: 1 1 50%;

}
input[type=submit] {
    flex: 1 1 20%;
    cursor: pointer;
    background: #5766AD;
    color: white;
    font-weight: 600;
}
input[name=url] {
/* Will occupy the entire width */
    flex: 1 1 100%;
}

/* Flex Skeletton
For a column main+footer
with a sticky footer */

body,
html {
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden;
}
section {
    flex: 1 0 auto;
}
footer {
    flex: none; // It's here the magic begins
}

Or another:

html, body {
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section {
  flex: none;
  margin-top: 0;
  margin-bottom: auto;
}
footer {
    flex: none;
}