Я пытаюсь заставить работать макет, используя Bootstrap 4, но есть проблема с позиционированием элементов на мобильном телефоне.Может быть, кто-то здесь может помочь мне, пожалуйста:)
Вот макет, который я хочу:
Изображение с макетом
Итак, как вы можетесм. это макет с двумя столбцами для рабочего стола и макет с одним столбцом для мобильных устройств.
Чтобы создать этот макет, я создал строку и сделал 2 столбца:
<div class="row">
<div class="col-md-12 col-lg-8 col-12">
<div id="productimage"></div>
<div id="description"></div>
<div id="reviews"></div>
</div>
<div class="col-md-12 col-lg-4 col-12">
<div id="pricebook"></div>
<div id="location"></div>
</div>
</div>
Итак, на рабочем столе этоработает гладко.
Но на мобильном устройстве я хочу, чтобы раздел «Цена и книга» из столбца 2 фактически находился прямо под элементом «Изображение продукта».Тем не менее, он явно идет ниже разделов Reviews с текущим кодом.
Итак, как я могу сделать эту работу?
Спасибо!
(Я пытался сделать все divбыть столбцами, но тогда макет рабочего стола нарушается, если высота элементов не идеальна, и это происходит, потому что элементы div в правом столбце на рабочем столе могут иметь различную высоту в зависимости от содержимого. Я попытался разделить это на несколько строк, но та же проблема).