コンテンツボックスのサイズが変更されたときにDivをラップしますか？

Question

ソースに応じてサイズが変わるコンテンツボックスがあります。

タイトルと情報の部分が横に並んで表示されます。

コンテンツボックスが大きい場合はうまく見えますが、小さければタイトルと情報オーバーが拡張されます。

コンテンツボックスがタイトル/情報幅よりも小さい場合、タイトルと情報をどのようにスタックすることができますか？

しかし、解像度のメディアクエリでは、ブラウザのサイズは変わらず、ボックスのサイズだけが変わります。

https://jsfiddle.net/hphzh1ea/

大（グッド）

小（拡張オーバー）

小さな積み重ね（それは見てする必要がありますどのように）あなたは、純粋なHTMLを探していた場合

HTML

.container { 
    display: inline-block; 
    margin: auto; 
    text-align: center; 
    padding: 1em; 
    border: 1px solid black; 
} 
.content { 
    margin: auto; 
    width: 200px; 
    height: 150px; 
    background: gray; 
} 

.info { 
    display: inline-block; 
} 
.title { 
    display: inline-block; 
    margin: 0 0 1em 0; 
    font-weight: bold; 
} 
.description { 
    display: inline-block; 
} 

Answer 1

わからない

<div class="container"> 

    <div class="content">content</div> 

    <div class="info"> 
    <div class="title">Title Title Title</div> 
    <div class="description">info info info info info info info info info</div> 
    </div> 

</div> 

CSS/CSSのソリューションが、私が書いたこのシンプルなjQueryスクリプト 助けることができます？

$(".container").find(function() { 
    var contentWidth = $(".content").outerWidth(); 
    var infoWidth = $(".info").outerWidth(); 
    if (contentWidth < infoWidth){ 
    $(".description").css('display', 'block'); 
    } 
});