How do you nest rows in W3.CSS for complex layouts?

Put a new w3-row inside a column to subdivide it, where the nested 12-column grid is measured relative to that parent column rather than the full screen.

<div class="w3-row">
    <!-- Left column: 6/12 -->
    <div class="w3-col m6">
        <div class="w3-row">
            <!-- Nested: each takes 6/12 of parent -->
            <div class="w3-col l6">First</div>
            <div class="w3-col l6">Last</div>
        </div>
        <div class="w3-col">Email</div>
    </div>
    <!-- Right column: 6/12 -->
    <div class="w3-col m6">Message</div>
</div>

Key concept: Nested rows always use 12 columns relative to their parent container, not the full screen.

Use case: Contact forms where name fields (First/Last) should be side-by-side within a larger column.