Table: Stacked

<div class="table-example-container">

    <div class="width-mobile">
        <table class="usa-table usa-table--stacked">
            <caption>Stacked bordered table <br>(when on a mobile-width screen)</caption>
            <thead>
                <tr>
                    <th scope="col">Document title</th>
                    <th scope="col">Description</th>
                    <th scope="col">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th data-label="Document title" scope="row">Declaration of Independence</th>
                    <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
                    <td data-label="Year">1776</td>
                </tr>
                <tr>
                    <th data-label="Document title" scope="row">Bill of Rights</th>
                    <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
                    <td data-label="Year">1791</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="width-mobile">
        <table class="usa-table usa-table--borderless usa-table--stacked">
            <caption>Stacked borderless table <br>(when on a <span class="text-no-wrap">mobile-width</span> screen)</caption>
            <thead>
                <tr>
                    <th scope="col">Document title</th>
                    <th scope="col">Description</th>
                    <th scope="col">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th data-label="Document title" scope="row">Declaration of Independence</th>
                    <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
                    <td data-label="Year">1776</td>
                </tr>
                <tr>
                    <th data-label="Document title" scope="row">Bill of Rights</th>
                    <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
                    <td data-label="Year">1791</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="width-mobile">
        <table class="usa-table usa-table--stacked-header">
            <caption>Stacked bordered table with headers <br>(when on a mobile-width screen)</caption>
            <thead>
                <tr>
                    <th scope="col">Document title</th>
                    <th scope="col">Description</th>
                    <th scope="col">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th data-label="Document title" scope="row">Declaration of Independence</th>
                    <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
                    <td data-label="Year">1776</td>
                </tr>
                <tr>
                    <th data-label="Document title" scope="row">Bill of Rights</th>
                    <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
                    <td data-label="Year">1791</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="width-mobile">
        <table class="usa-table usa-table--borderless usa-table--stacked-header">
            <caption>Stacked borderless table with headers <br>(when on a mobile-width screen)</caption>
            <thead>
                <tr>
                    <th scope="col">Document title</th>
                    <th scope="col">Description</th>
                    <th scope="col">Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th data-label="Document title" scope="row">Declaration of Independence</th>
                    <td data-label="Description">Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
                    <td data-label="Year">1776</td>
                </tr>
                <tr>
                    <th data-label="Document title" scope="row">Bill of Rights</th>
                    <td data-label="Description">The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
                    <td data-label="Year">1791</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>
<style scoped>
    .table-example-container {
        display: flex;
        column-gap: 2rem;
        row-gap: 2rem;
        flex-flow: row wrap;
        justify-content: space-around;
    }
</style>