0

Как сделать следующий список

1 6
2 7
3 8
4 9
5 10

Чтобы на мобильных устройствах он выравнивался по-порядку

1
2
3
4
...

Забыл добавить, нужно еще чтобы 1-6, 2-7, 3-8, ... чтобы каждая из этих пар была на одной линии, то есть высота 1 = высоте 6, высота 2 = высоте 7 и т.д. Количество контента в каждой ячейке разное.

2 ответа 2

1

Если правильно понял, пример снизу.

Пример:

div.column {
  border: 3px solid black;
}

div.column-1 {
  background: yellow;
}

div.column-2 {
  background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="column column-1">
        <p>
          1
          <br> 2
          <br> 3
          <br> 4
          <br> 5
        </p>
      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
      <div class="column column-2">
        6
        <br> 7
        <br> 8
        <br> 9
        <br> 10
      </div>
    </div>
  </div>
</div>

0
  1. Можно к бутстраповским колонкам добавить к блокам текста псевдоэлемент :before со счётчиком, а потом настроить внешний вид номера и его положение относительно текста:

    .
    Вот решение аналогичной задачи. В нём номера нанизаны на вертикальную линию, но её можно убрать.

    so  •  codepen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

body {
  background: lightgrey; 
}

.timeline {
  background: white; 
  counter-reset: section;
  margin: 20px auto;
  padding-left: 70px;
  padding-top: 50px;
}

.timeline .col-xs-12 {
  border-left: solid 4px orange;
  padding-bottom: 80px;
  padding-left: 40px;
  padding-right: 60px;
}

.timeline .col-xs-12:before {
  /* counter */
  counter-increment: section;
  content: counter(section);
  /* position */
  position: absolute;
  left: -22px; /* = (width + border-left) / 2 */
  top: -30px;
  /* form & size */
  border-radius: 50%;
  height: 40px;
  width: 40px;
  /* colors & text */
  background: orange;
  color: white;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

/* images */
.timeline img {
  margin-top: 20px;
  width: 100%;
}
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}
<div class="container timeline">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/900x300/c69/f9c/?text=First" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/900x300/9c6/cf9/?text=Second" alt=""></div>
          </div>
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
      </div>
    </div>
      
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          <div class="row">
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/900x300/69c/9cf/?text=Three" alt=""></div>
            <div class="col-xs-6 col-sm-12 col-md-6"><img src="//placehold.it/900x300/96c/c9f/?text=Four" alt=""></div>
          </div>
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
        <div class="col-xs-12">
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
          A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.
        </div>
      </div>
    </div>
  </div>
</div>

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.