Valery

codepen.io/anon/pen/VLWWgB?editors=010

Поиграйте с размерами видимой области, посмотрите на поведение.
Portrait — ширина меньше высоты. Landscape — ширина больше высоты.
Ширина — всегда горизонтальное измерение. Если размер экрана равен 480x840, то в альбомной ориентации ширина будет равна 840. Соответственно, стили, прописанные для (max-width: 480px) and (orientation: landscape) при ширине 840 работать уже не будут

¯\_(ツ)_/¯
display: table

codepen.io/anon/pen/YXQpZW

1. Прячем меню слева
2. При клике на гамбургер показываем меню и двигаем контент вправо

jQuery в данном примере только добавляет и убирает классы для рабочих элементов. Все стили и позиционирование пишутся в css

Нужный вам коллбэк — afterAction

owl.owlCarousel({
	navigation : false,
	singleItem : true,
	slideSpeed : 300,
	paginationSpeed : 400,
	autoPlay: true,
	transitionStyle : "fade",
	addClassActive : true,

	afterAction: function(){
		$('p').removeClass('fadeInDown');
		$('.active p').addClass('fadeInDown');
	}
});

codepen.io/anon/pen/aOWadK

Для всех пунктов, начиная с пятого, делаем отступ слева, равный ширине меню:

.menu li:nth-child(n+5){
    margin-left: 215px;
}

Пятый пункт тянем вверх с помощью отрицательного margin (значение зависит от высоты первой колонки)

.menu li:nth-child(5){
    margin-top: -108px;
}

https://jsfiddle.net/orLtLar8/42/