содержание оплавления Bootstrap разных размеров

Question

Я знаю основы сетки Bootstrap 3, в том числе тяни/толкай, но я не придумал, как сделать макет так:

В основном Я хочу, чтобы текстовый блок между изображениями имел размер XS, но затем поднялся в свой столбец, когда окно становится больше. Я знаю, что могу перемещать содержимое с помощью javascript или что-то в этом роде, но я ищу способ сделать это в разметке. У кого-нибудь есть подсказки?

Answer 1

Это могло бы произойти, но я не уверен, что вы хотите, когда высота изображения превышает высоту текста. Это происходит в моей демонстрации по ширине md.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6"> 
      <img class="img-responsive" src="..." /> 
     </div> 
     <div class="col-xs-12 col-sm-6 pull-right text"> 
      <p class="lead">text text text tex...</p> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <img class="img-responsive" src="..." /> 
     </div> 
    </div> 
</div> 

Demo

Answer 2

Вы можете сделать это с двумя добавленными классами:

DEMO: http://jsbin.com/piwoja/1/

http://jsbin.com/piwoja/1/edit

CSS:

.clear-left {clear:left} 
@media (min-width:768px){ 
    .pull-right-sm {float:right;} 
} 

HTML:

 <div class="container"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <img class="img-responsive" src="http://placehold.it/500x500&text=Image 1" /> 
     </div> 
     <div class="col-sm-6 pull-right-sm"> 
      ... your text goes here long or short 
     </div> 
     <div class="col-sm-6 clear-left"> 
      <img class="img-responsive" src="http://placehold.it/500x500&text=Image 2" /> 
     </div> 
     </div>