Изменение начальной загрузки макета на мобильных

У меня есть jsfiddle здесь - https://jsfiddle.net/a4cbvzj7/1/Изменение начальной загрузки макета на мобильных

Супер простая начальная загрузка макет, два Col, изображения сверху тексте снизу.

На мобильном телефоне я хочу текст на верхнем изображении внизу.

Могу ли я сделать это с помощью push pull или мне нужно иметь два макета и скрыть и показать их на рабочем столе, на мобильных устройствах.

<div class="container"> 
     <div class="row"> 
     <div class="col-sm-12 text-center"> 
      <img src="http://placehold.it/350x150" alt="" class="img-responsive"/> 
     </div> 
     <div class="col-sm-12 text-center"> 
      <p class="text"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 

      </p> 
     </div> 
     </div> 
    </div>

источник

2016-03-04 ttmt

Кажется, что вы предоставили не в двух столбце, но я могу выяснить, что вам нужно.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 text-center col-md-push-6"> 
     <p class="text"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
     </p> 
    </div> 
    <div class="col-md-6 text-center col-md-pull-6"> 
     <img src="http://placehold.it/350x150" alt="" class="img-responsive"/> 
    </div> 
    </div> 
</div>

, если вы хотите узнать больше, то посмотрите на: http://getbootstrap.com/css/#grid и выписка из колонки заказа

источник

2016-03-04 11:12:07 jsg

I посмотрите, что вы имеете в виду, они не были фактически столбцами рядом друг с другом, но они были установлены на 12, чтобы они сидели сверху каждого er, который так я хочу. Ваш макет имеет их рядом друг с другом. – ttmt

Вы можете сделать с помощью скрытого класса xs для мобильных устройств, чтобы скрыть определенный класс и скрытый-скрытый скрытый-md скрытый-lg для класса, который вы хотите скрыть на рабочем столе и планшете. Поскольку push и pull будут работать только с классами столбцов, которые допускают несколько столбцов внутри строки. – jsg

Или вы можете сделать небольшой оператор javascript, который сможет идентифицировать ширину браузера, меньше 767px и переопределить класс до – jsg

Вы можете достичь этого, просто используя медиа-запрос как

@media (max-width: 768px){ 
.row { 
    display: flex; 
    flex-direction: column-reverse; 
    } 
}

обновленный скрипку here

источник

2016-03-04 11:32:59

Изменение начальной загрузки макета на мобильных

ответ

Смежные вопросы