Александр Ружевич

Тут немного объясняют и есть даже толковые исходники:
tympanus.net/codrops/2016/05/11/distorted-button-e...

li:first-child > a {
color: red;
font-size: 25px;
text-decoration: underline;
}

каждую колонку необходимо заключить в див и все будет работать без джейквери

В бутстрапе вообще не стоит использовать то, что есть напрямую.
В бутстрапе нужно брать LESS/SASS и там наследовать и переопредлять нужные классы и генерировать нужные размерности сетки для каждого случая. То что там по дефолту это для очень быстрых прототипов или очень простых задач. В целом бутстрап это LESS/SASS фремворк который значительно упрощает работу верстальщика.

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

Согласен с Владиславом Турчинским. Если все же нужно на пхп, то пример реализации ниже.

<?php
<?php
$yourArray = [
	'one',
	'two',
	'three',
	'four',
	'five',
	'six',
	'seven',
];

$chunkedArr = array_chunk ($yourArray, 2);

foreach ($chunkedArr as $key=>$val) {
	$chunkedArr[$key] = implode (", ", $val);
}

print_r( implode(" | ", $chunkedArr ) );

string(42) "one, two | three, four | five, six | seven"

Добрый день.
Вот то, что вам нужно: mentor-framework.ru/?p=216

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

В примере нет перемещения с помощью Z-index, но лучше добавить.

если ширина 100% вьюпорта, то можно использовать 40vw
codepen.io/anon/pen/GEziv