css flex

<div class="content">
    <div class="con con1">1</div>
    <div class="con con2">2</div>
    <div class="con con3">3</div>
    <div class="con con4">4</div>
</div>

<STYLE>
    .content {
        display: flex;
        flex-direction: column;
        width:250px;
    }
    .con {
        width: 50px;
        height: 50px;
        border:solid 1px red;
    }
</STYLE>

<STYLE>
    .content {
        display: flex;
        flex-direction:column-reverse;
        width:250px;

    }
    .con {
        width: 50px;
        height: 50px;
        border:solid 1px red;
    }
</STYLE>