Последовательность блоков в bootstrap

345

25 апреля 2017, 05:40

Мне нужно чтобы блоки изменяли порядок как на картинке.

а - это sm, md, lg. б - это xs

<div class="row">
  <div class="col-md-4 col-sm-2 col-xs-6">один</div>
  <div class="col-md-4 col-sm-4 col-xs-12 col-xs-push-6">три</div>
  <div class="col-md-4 col-sm-6 col-xs-6 col-xs-pull-12">два</div>
</div>

Пытаюсь сделать так, но не получается. Спасибо!

Answer 1

Пример

[class*=col-]{ 
  border: 1px solid #ccc; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="row"> 
  <div class="col-md-4 col-sm-2 col-xs-6">один</div> 
  <div class="col-md-4 col-sm-4 col-xs-6 col-md-push-4 col-sm-push-6">три</div>     
<div class="col-md-4 col-sm-6 col-xs-12 col-md-pull-4 col-sm-pull-4">два</div>   
</div>

Answer 2

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">один</div>
  <div class="col-xs-6 col-sm-2 col-sm-push-6 col-md-4 col-md-push-4">три</div>
  <div class="col-xs-12 col-sm-6 col-sm-pull-2 col-md-4 col-md-pull-4">два</div>
</div>