Как сверстать две колонки на CSS

.flex { 
    display: flex; 
    flex-wrap: wrap; 
} 
.col-md-6 { 
    width: 50%; 
} 
@media (max-width: 768px) { 
    .flex { 
        flex-direction: column 
    }   
}

<div class="flex"> 
    <div class="col-md-6">1</div> 
    <div class="col-md-6 flex"> 
        <div class="col-md-6">1</div> 
        <div class="col-md-6">2</div> 
        <div class="col-md-6">3</div> 
        <div class="col-md-6">4</div> 
    </div> 
</div>