How can I prevent my <dl> from wrapping at very low resolutions?
<p>I have a div with a class col-sm-12 and inside of it, I have something along these lines:</p>

<pre><code>&lt;dl class="dl-horizontal"&gt;
    &lt;dt&gt;Price:&lt;/dt&gt; &lt;dd&gt;${{ number_format($listing-&gt;CurrentPrice,0) }}&lt;/dd&gt;
    &lt;dt&gt;Status:&lt;/dt&gt; &lt;dd&gt;{{ $listing-&gt;Status }}&lt;/dd&gt;
    &lt;dt&gt;MLS Number:&lt;/dt&gt; &lt;dd&gt;{{ $listing-&gt;MLSNumber }}&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>

<p>I like the way it looks on a large screen but on a small screen, e.g. iPhone at 640px wide, the <code>&lt;dd&gt;</code> tags break onto another line even though there is plenty of room.</p>

<p>On a large screen, that section looks like this:</p>

<p><a href="https://i.stack.imgur.com/omOuS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/omOuS.png" alt="Large Screen Screenshot"></a></p>

<p>When I go to the iPhone screen at 640px wide, it looks like this:</p>

<p><a href="https://i.stack.imgur.com/TdkaM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TdkaM.png" alt="iPhone Screenshot"></a></p>

<p><strong>How do I keep the <code>&lt;dt&gt;</code> and <code>&lt;dd&gt;</code> on the same line in Bootstrap 3 when I get to very small resolutions?</strong></p>