.accordion-item .accordion-collapse {
position: relative;
z-index: 1;
}
@media(min-width: 768px) {
.accordion-item:nth-child(3n+1) .accordion-collapse {
margin-right: -200%;
}
.accordion-item:nth-child(3n+2) .accordion-collapse {
margin-right: -100%;
margin-left: -100%;
}
.accordion-item:nth-child(3n+3) .accordion-collapse {
margin-left: -200%;
}
}
mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:чтобы линии начинались с конца второй строки и примыкали ко второй строке
$(document).ready(function() {
$('.classOfTextField').bind('textchange', function() {
// какие-то действия
return true;});
});
.div2 {
background: url("../images/img1.jpg") left 10px / 200px 50px no-repeat;
}
На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before.
p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"
@media не соответствующих заранее определенным брейкпоинтам (хотя есть исключения). 
$('h1').each(function(i,el){ //обрабатываем все h1
var t = el.text(); //взяли текст
var f = t.substring(0,100); //взяли первые 100 символов
var l = t.substring(100); //взяли все после 100
el.html(f+'<span class="blur">'+l+'</span>'); //обрамили все после 100 в спан с классом
});
