Укладка текстового компонента с бутстрапом без дублирования 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; 
    } 

Надеюсь, это поможет!