Вопрос по bootstrap разметке

[newjey]

В карточке товара не получается один блок выровнять

 

4ый блок почему-то ровняется по 2му блоку и получается не красиво. Как его подтянуть выше, под 3ий блок?

margin пробовал, но при просмотре на мобильном блоки наезжают друг на друга.

 

Сейчас разметка имеет такой вид

 <div class="row" style="margin-top:-13px;"> <?php echo $column_left; ?>
       <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 visible-lg visible-md nopad" style="float:right;">	
		логотип		
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">
			1ый блок
		</div>
		   

		<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">
			3ий блок
		</div>
		
			<div class="col-xs-12 col-sm-12 col-md-7 col-lg-8" style="float:left;">	
				
			2ой блок
				
		</div>	
			<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4" style="float:right;">	
				4ый блок
        </div>
      </div>	
		</div>	
			 </div>

[n3bo]

<div class="row">
 <div class="col-sm-8">
   <div>1</div>
   <div>2</div>
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>

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

 

Как вариант:

<div class="row">
 <div class="col-sm-8">
   1
 </div>
 <div class="col-sm-4">
   <div>3</div>
   <div>4</div>
</div>
<div class="col-sm-8">
 2
</div>

Змінено 6 січня 2017 користувачем n3bo

[newjey]

Спасибо за ответ, но надо что бы блок 4 на мобильных был тоже в конце.

[newjey]

На мобильном сейчас отображается вот так

 

И так должно остаться.

[n3bo]

http://stackoverflow.com/questions/22148063/making-a-pinterest-like-grid-with-bootstrap-the-boxes-are-not-displayed-right-b

[pimur]

Используйте media запросы с margin. Для компьютеров используйте отрицацельный margin, для мобильных как положено. Как вариант.

Змінено 6 січня 2017 користувачем pimur

[rim89]

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

[newjey]

 

Дублировать 4ый блок и скрывать его же 

<div class="test">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8">
                1
            </div>
            <div class="col-xs-12 col-md-4">
                3
                <div class="hidden-xs hidden-sm">
                    4
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                2
            </div>
            <div class="col-xs-12 col-md-4 hidden-md hidden-lg">
                4
            </div>
        </div>
    </div>
</div>

 

Ооо, как же я сам не додумался, идеально помоему)