Как сделать зеркальную таблицу, с помощью?

Question

[Виталий Хван]

Имеется такая по виду, якобы таблица:

Есть ли готовые уже экземпляры? Чтоб разделить это по 2 блока:
к примеру:

<div class="first-team col-md-6">

</div>
<div class="second-team col-md-6">

</div>

Если нет, то может кто намекнуть в какую сторону копать, чтоб разделить их так, чтоб вся информация отображалась зеркально?

Comments

[Антон Спирин]

Как вы хотите разделить? Что значит "зеркально?

[Одиночка Айс]

Антон Спирин, значит поделить данные пополам, слева сначала текст потом картинка, а справа наоборот))

[Виталий Хван]

Одиночка Айс, да, да именно так, пока что из этой идеи что то ничего толкового не выходит

[Антон Спирин]

Вы бы вопрос нормально сформулировали. На картинке ожидаемый результат или это блок который вы хотите изменить?

[Виталий Хван]

Антон Спирин, на картинке, это то, что пока что получилось

[Антон Спирин]

Виталий Хван, и чем то что у вас сейчас получилось отличается от ожидаемого результата? Что конкретно хотите изменить?

Answer 1

[Ankhena]

Каждый элемент

<div class="block">
  <div class="text">text</div>
  <img>
</div>

.block {
флекс
}
.block:nth-child(even) .text{
order:2;
}

Comments

[Виталий Хван]

а можно подробнее? или draft набросок какой нибудь?

[Виталий Хван]

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

<div class="player player200">
     <img src="http://ddragon.leagueoflegends.com/cdn/7.23.1/img/champion/Jhin.png" alt="">
     <div class="player-stat">
            <p>Etternum</p>
            <p>1</p>
      </div>
</div>

Что с правой стороны, что с левой, и при попытке написать player > * {display:inline-block} получается откровенная ерунда с левой стороны, а расположить элементы по другому я не могу, ибо выводиться это все динамически

[Ankhena]

Виталий Хван, да я вроде весь код и так написала в ответе
но пусть будет песочница https://jsfiddle.net/86vk88bj/

[Виталий Хван]

Ankhena, Благодарю! То что искал прям!!

[Ankhena]

Виталий Хван, order отвечает за порядок вывода флекс-элементов.

ибо выводиться это все динамически

вообще без разницы откуда оно берется

[Виталий Хван]

Ankhena, а еще такой вопрос, элементы зеркальные хранятся не по порядку, а в разных столбцах
т.е. :

<div class="blue-team">
    <div class="player player100">
          <div class="text">some_hero_name</div>
          <img>
    </div>
</div>
<div class="red-team">
<div class="player player200">
          <div class="text">some_hero_name</div>
          <img>
    </div>
</div>

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

[Ankhena]

Виталий Хван, изменить селектор.
Я написала для всех четных детей. Вам надо написать для всех детей красного столбца.
.red-team .text {order:2}

[Виталий Хван]

Ankhena, Спасибо большое

Answer 2

[Максим Тимофеев]

Если Вы планируете использовать boostrap то в нем же есть и grid и list-group
v4:
getbootstrap.com/docs/4.0/layout/grid/#equal-width
getbootstrap.com/docs/4.0/components/list-group/#l...
v3:
https://getbootstrap.com/docs/3.3/css/#grid
https://getbootstrap.com/docs/3.3/components/#media