Как я могу отобразить другой макет с бутстрапом 3?

Question

Я пытаюсь отобразить другой макет для мобильных просмотров. В представлении рабочего стола с использованием сетки я имею 4 столбца каждый с 2 ​​столбцами изображение и метку + значение. В мобильном я хочу пропустить столбец изображения, а для метки и значения я хочу их рядом с eachother, так что-то вроде:

Это ярлык: это пролет.

1 колонка в настольной версии выглядит примерно так:

<div class="col-md-3"> 
     <div class="col-md-2"> 
     <p>col-md-4</p> 
     </div> 
     <div class="col-md-10"> 
     <div>This is a label</div> 
     <span>This is a span</span> 
     </div> 
</div> 

Я пытался использовать Col-СМ-3, но он по-прежнему отображается на рабочем столе? Как я могу получить мобильный вид с меткой и значением рядом с eachother?

Смотрите также: codepen

Answer 1

вы можете использовать загрузочный класс CSS:

<h2>Example</h2> 
<p>Resize this page to see how the text below changes:</p> 
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1> 
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1> 
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1> 
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1> 

Answer 2

с помощью медиа запросов вы можете изменить атрибуты элементов/классов/идентификаторов в зависимости от размера экрана. Вы можете быть особенно заинтересованы в использовании display: none; следующим образом:

CSS

/*For smartphone and small devices*/ 
@media only screen and (min-width: 480px) { 
    .hide-me { 
     display: none; 
    } 
} 

/*For tablet sized devices and larger*/ 
@media only screen and (min-width: 748px) { 
    .hide-me { 
     display: block; 
    } 
} 

Конечно, вы можете удвоить функциональность col-xs-3 (или любой по вашему выбору), но используя его в качестве селектора класса в медиа-запрос.

@media only screen and (min-width: 748px) { 
    .col-xs-3 { 
     display: block; 
    } 
} 

Ознакомьтесь с некоторыми стандартными документами, отвечающими требованиям, особенно тем, которые предоставляются Twitter! Первой мобильной считается обычная, где вы начинаете с меньших медиа-запросов, затем становитесь больше.

http://getbootstrap.com/css/