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

NewJey
На сайте с 21.11.2009
Offline
113
910

В магазине в карточке товара есть такая разметка

на мобильном она выглядит вот так

Реализовано это так

 <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>

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

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

Как поднять этот блок что бы все блоки были в том же порядке в котором они сейчас есть?

---------- Добавлено 06.01.2017 в 15:29 ----------

Вопрос решился подменами блоков для мобильных устройств и для ПК.

DC
На сайте с 12.06.2010
Offline
51
#1

в боострапе есть функция push pull почитайте она позволяет в мобильных версиях менять порядок блоков

E
На сайте с 23.08.2016
Offline
9
#2

Я бы вынес все эти страшные "style="float:right;"" в .css и с помощью media-запросов переопределил порядок следования блоков.

V0
На сайте с 24.10.2016
Offline
2
#3
margin пробовал, но при просмотре на мобильном блоки наезжают друг на друга.

Через media для мобильных уберите этот margin, как вариант.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий