Как правильно сверстать блоки?

Question

[Сергей]

Помогите правильно сверстать.
Есть такая структура блоков:

<div class="row">
     <div class="col-xs-12">Блок 1</div>
     <div class="col-xs-12">Блок 2 самый высокий</div>
     <div class="col-xs-12">Блок 3</div>
     <div class="col-xs-12">Блок 4</div>
</div>

На мобильной версии блоки идут один за другим по порядку, тут все понятно.
Для десктопа надо сделать 2 столбца, где в первом "Блок 2 самый высокий", а во втором блоки 1,3,4

<div class="row">
     <div class="col-xs-12 col-md-4 col-md-push-8">Блок 1</div>
     <div class="col-xs-12 col-md-8 col-md-pull-4">Блок 2 самый высокий</div>
     <div class="col-xs-12 col-md-4">Блок 3</div>
     <div class="col-xs-12 col-md-4">Блок 4</div>
</div>

При таком построении 3 и 4 блоки выстраиваются в новой строке, как передвинуть их в правый столбец под блок 1?

Comments

[Сергей delphinpro]

1. clear:left через медиазаросы и селектор nth-child()
   
2. display:flex;flew-wrap:wrap; для row (точнее отдельный класс повесьте, .row-flex например)
   

[Сергей]

Сергей:
может я что-то не так делаю?
https://jsfiddle.net/n34xoqce/2/

Answer 1

[iBird Rose]

https://jsfiddle.net/n34xoqce/

Comments

[Сергей]

iBird Rose:
К сожалению, не работает этот вариант если Блок 2 высокий
https://jsfiddle.net/n34xoqce/1/