.btn.btn-xs-block,
.btn.btn-sm-block,
.btn.btn-md-block,
.btn.btn-lg-block,
.btn.btn-xl-block {
    width: 100%;
    margin: 0 0 0.5em 0;
}

.sidebar-sm,
.sidebar-md,
.sidebar-lg,
.sidebar-xl {
    border-left-color: #fc0;
    border-left-width: 3px;
    border-left-style: none;
}

@media (min-width: 576px) /* SM */ {
    body {
        font-size: 1rem;
    }

    .three-columns {
        columns: 2 auto;
    }

    .two-columns {
        columns: 2 auto;
    }

    .sidebar-sm {
        border-left-style: solid;
        padding-left: 1.8em;
        align-self: flex-start;
    }

    .btn.btn-xs-block {
        width: auto;
        margin: 0 0.5em 0.5em 0;
    }
}

@media (min-width: 768px) /* MD */
{
    .three-columns {
        columns: 3 auto;
    }

    .sidebar-md {
        border-left-style: solid;
        padding-left: 1.8em;
        align-self: flex-start;
    }

    .btn.btn-sm-block {
        width: auto;
        margin: 0 0.5em 0.5em 0;
    }
}

@media (min-width: 992px) /* LG */
{
    body {
        font-size: 1.1rem;
    }

    .sidebar-lg {
        border-left-style: solid;
        padding-left: 1.8em;
        align-self: flex-start;
    }

    .btn.btn-md-block {
        width: auto;
        margin: 0 0.5em 0.5em 0;
    }
}

@media (min-width: 1200px) /* XL */
{
    .sidebar-xl {
        border-left-style: solid;
        padding-left: 1.8em;
        align-self: flex-start;
    }

    .btn.btn-lg-block {
        width: auto;
        margin: 0 0.5em 0.5em 0;
    }

}