<view id="icon-figure" viewBox="0 0 30 30" />
<div class="row">
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-4 col-xs-4"></div>
<div class="col-md-4 col-xs-4"></div>
</div>
.row {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: row;
justify-content: space-between;
}
float:left
flex-direction:column;
если вам надо чтобы внутренние элементы располагались в колонку (столбик). Для внутренних блоков так же пишете что-нибудь типа col-xs-12, чтобы они занимали 100% ширину родителя на телефоне. Ничего сложного. // при клике по кнопке определяем её индекс и хватаем .photos__like-count с таким же индексом
document.addEventListener('click', ({ target: t }) => {
if (t.classList.contains('photos__like-icon')) {
const index = [...document.querySelectorAll('.photos__like-icon')].indexOf(t);
const counter = document.querySelectorAll('.photos__like-count')[index];
const count = counter.textContent;
counter.textContent = t.classList.toggle('active') ? -~count : ~-count;
}
});
// но если у каждой пары icon-count если отдельный общий предок, то можно и попроще сделать
document.addEventListener('click', ({ target: t }) => {
if (t.matches('.photos__like-icon')) {
t
.closest('селектор общего предка кнопки и элемента с количеством')
.querySelector('.photos__like-count')
.textContent -= t.classList.toggle('active') ? -1 : 1;
}
});
const toggleLike = function({ target: t }) {
this[t.dataset.index].innerText -= [ 1, -1 ][+t.classList.toggle('active')];
}.bind(document.querySelectorAll('.photos__like-count'));
document.querySelectorAll('.photos__like-icon').forEach((n, i) => {
n.dataset.index = i;
n.addEventListener('click', toggleLike);
});
// или, при наличии отдельных общих предков у каждой пары .photos__like-icon и .photos__like-count
const toggleLike = ({ target: t }) => t
.closest('селектор общего предка кнопки и элемента с количеством')
.querySelector('.photos__like-count')
.innerText -= t.classList.toggle('active') ? -1 : 1;
for (const n of document.querySelectorAll('.photos__like-icon')) {
n.addEventListener('click', toggleLike);
}
.container {
background-size: 100% 3px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="203" height="3" viewBox="0 0 203 3">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax" viewBox="0 0 203 3">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="203" height="3" viewBox="0 0 203 3">
даже когда фраза не является заголовком для поискового робота