How do you create a responsive 3-column layout with W3.CSS?

Wrap three w3-col m4 boxes in a w3-row, so they sit side by side on medium and larger screens and stack on small ones.

<section class="w3-container">
    <article class="w3-row">
        <div class="w3-col m4 w3-blue">Box 1</div>
        <div class="w3-col m4 w3-red">Box 2</div>
        <div class="w3-col m4 w3-green">Box 3</div>
    </article>
</section>

Result:

• Medium/Large screens: 3 columns side by side (each 4/12 = 33%)
• Small screens: Stacked vertically (defaults to 12/12 = 100%)

Key classes:

• w3-container - Outer container with padding
• w3-row - Flex row container
• w3-col - Column element
• m4 - Takes 4 of 12 columns on medium+ screens