<style>
    .column {
        width: 50%; /* Each column takes up 50% of the container's width */
        float: left; /* Columns sit next to each other */
    }
    
    @media (max-width: 600px) {
        .column {
            width: 100%; /* Each column takes up 100% of the container's width */
        }
    }
    </style>
    
<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
</div>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.