<p class="small text-muted mb-4">Each row: semantic tag (left) vs <code>.hN</code> on <code>&lt;p&gt;</code> (right).</p>

<article class="row">
    <div class="col-md-6">
        <h1>Heading 1</h1>
    </div>
    <div class="col-md-6">
        <p class="h1">Heading 1</p>
    </div>
</article>
<article class="row">
    <div class="col-md-6">
        <h2>Heading 2</h2>
    </div>
    <div class="col-md-6">
        <p class="h2">Heading 2</p>
    </div>
</article>
<article class="row">
    <div class="col-md-6">
        <h3>Heading 3</h3>
    </div>
    <div class="col-md-6">
        <p class="h3">Heading 3</p>
    </div>
</article>
<article class="row">
    <div class="col-md-6">
        <h4>Heading 4</h4>
    </div>
    <div class="col-md-6">
        <p class="h4">Heading 4</p>
    </div>
</article>
<article class="row">
    <div class="col-md-6">
        <h5>Heading 5</h5>
    </div>
    <div class="col-md-6">
        <p class="h5">Heading 5</p>
    </div>
</article>
<article class="row mb-3 align-items-start">
    <div class="col-md-6">
        <h6>Heading 6</h6>
    </div>
    <div class="col-md-6">
        <p class="h6">Heading 6</p>
    </div>
</article>
