Колонка начальной загрузки не складывается

Question

Я разрабатываю сайт с использованием Oscommerce 2.4.3. Bootstrap.

На странице товаров мой желаемый макет - изображение товара слева и информация о товаре в виде списка справа.

|  IMAGE |  Colour:         Red |
|        |  Weight:         1kg |
|        |  size:           1M  |
|        |  model:          xyz |

Для меня важно, чтобы детали в деталях продукта были согласованы друг с другом, т.е. НЕ:

Colour: Red
Weight: 1kg
size:1M
model: xyz

Я новичок в Bootstrap и ищу советы о том, как лучше всего этого достичь.

Первоначальный подход, который я выбрал, заключался в том, чтобы поместить изображение в один столбец, сведения о продукте - в другой, а затем вставить в него два столбца. Это работало для тех деталей продукта, которые находились над нижней частью изображения, однако все, что было ниже нижней части изображения, затем перемещалось до левой стороны, то есть под изображение.

Подход, который я тогда использовал, заключался в том, чтобы поместить изображение в один столбец, а в другом столбце создать группу списка. Мне пришлось указать ширину в столбцах, чтобы они могли оставаться выровненными в формате 2x2, а не возвращаться к размеру их содержимого, например

    <li class="list-group-item borderless col-sm-4"> Colour </Li>
    <li class="list-group-item borderless col-sm-8"> Red </Li>
    <li class="list-group-item borderless col-sm-8"> Weight </Li>
    <li class="list-group-item borderless col-sm-8"> 1kg </Li>

Этот подход работает и выглядит хорошо при просмотре сайта через компьютер dekstop. Однако при изменении размера экрана или просмотре страницы через мобильный телефон столбец, содержащий список, отклоняет стопку под изображением.

Мои вопросы:

1. Любое общее руководство по наилучшему способу достижения указанного выше формата:
2. Любая причина, почему списки не будут складываться под изображением, и что я мог сделать, чтобы решить.

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

Answer 1

Лично я думаю, что было бы лучше отделить элементы группы списка от элементов сетки.

<div class="row">
<div class="col-sm-4">
<img src="../path/to/image.jpg" class="img-responsive" />
</div>

<div class="col-sm-8">
<li class="list-group-item borderless"> Colour </Li>
    <li class="list-group-item borderless"> Red </Li>
    <li class="list-group-item borderless"> Weight </Li>
    <li class="list-group-item borderless"> 1kg </Li>
</div>
</div><!-- closing div for row -->

Если я не ошибаюсь, список группы всегда будет отображаться вертикально. Если вы хотите, чтобы список отображался горизонтально на больших экранах, но располагался вертикально на маленьком экране, то вы можете сделать что-то более похожее на это:

<div class="row">
<div class="col-sm-4">
<img src="../path/to/image.jpg" class="img-responsive" />
</div>

<div class="col-sm-2">Colour</div>
<div class="col-sm-2">Red</div>
<div class="col-sm-2">Weight </div>
<div class="col-sm-2">1kg </div>

</div><!-- closing div for row -->

РЕДАКТИРОВАТЬ

Вы можете оставить горизонтальные элементы Color, Red, Weight и 1kg горизонтальными, но разрешить их объединение в группы под изображением путем размещения строк сетки. Сначала нужно пометить вложенные столбцы сетки как col-xs (согласно документации по начальной загрузке они всегда останутся горизонтальными).

<div class="row">
  <div class="col-sm-4">
  <img src="../path/to/image.jpg" class="img-responsive" />
  </div>

  <div class="col-sm-8">

    <div class="row">
        <div class="col-xs-3">Colour</div>
        <div class="col-xs-3">Red</div>
        <div class="col-xs-3">Weight</div>
        <div class="col-xs-3">1kg</div>
    </div><!-- nested row -->

  </div><!-- col-sm-8 -->
</div><!-- outer row -->

Если вы хотите, чтобы список оставался горизонтальным, но затем на маленьких экранах, разделенных на два сложенных горизонтальных списка, вы можете объединить классы сетки следующим образом:

<div class="row">
  <div class="col-sm-4">
  <img src="../path/to/image.jpg" class="img-responsive" />
  </div>

  <div class="col-sm-8">

    <div class="row">
        <div class="col-xs-6 col-sm-3">Colour</div>
        <div class="col-xs-6 col-sm-3">Red</div>
        <div class="col-xs-6 col-sm-3">Weight</div>
        <div class="col-xs-6 col-sm-3">1kg</div>
    </div><!-- nested row -->

  </div><!-- col-sm-8 -->
</div><!-- outer row -->