.navigace {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;

    list-style: none;
    margin: 0;
}
.navigace a {
    text-decoration: none;
    display: block;
    padding: 10px;
}
.navigace a:hover {
    background-color: lightgreen;
    transition: 0.5s;
}
@media all and (max-width: 800px) {
    .navigace {
        justify-content: space-around;
    }
}
@media all and (max-width: 600px) {
    .navigace {
        flex-flow: column wrap;
        padding: 0;
    }
    .navigace a {
        text-align: center;
        padding: 10px;
    }
}

.wrapper {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
}
.wrapper > * {
    padding: 10px;
    flex: 1 100%
}

@media all and (min-width:600px) {
    .aside {
        flex: 1 0 0;
    }
}

@media all and (min-width: 800px) {
    .main       { flex: 3 0px;}
    .aside-1    {order: 1;}
    .main       {order: 2;}
    .aside-2    {order: 3;}
    .footer     {order: 4;}
}