使用自舉堆疊文本組件而不使用重複的HTML

Question

我試圖讓文本在大型設備上成爲全寬，然後在具有較大文本的移動設備上堆疊。

我意識到如果瀏覽器很小，然後爲小型設備設置三個文本塊到col-12，我可以做一些大文本不顯示的東西，但似乎很多html複製。有沒有更好的方法來解決這個問題？

我的代碼如下。我承認我可以用小型設備的引導覆蓋覆蓋字體大小。我只需要堆疊字體的幫助。

我這裏包括一個codepend：http://codepen.io/anon/pen/pRQZdR

<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1> 


@include media-breakpoint-up(sm) { 
     .title-text-md { 
     font-size: 20px; 
     } 
    } 

Answer 1

添加這個CSS這可能做的伎倆。

@media (max-width: @screen-xs) { 
h1{font-size: 30px;} 
} 

@media (max-width: @screen-sm) { 
h1{font-size: 4px;} 
} 
    @media (max-width: @screen-md) { 
h1{font-size: 400px;} 
} 
@media (max-width: @screen-md) { 
h1{font-size: 40px;} 
    } 
h1{ 
font-size: 1.4em; 
    } 

希望這有助於！