<!-- css -->

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 

    .landscape { display: none; }

}

@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 

    .portrait { display: none; }

}

 

<!-- example markup -->

<h1 class="portrait">Your device orientation is "portrait"<h1>

<h1 class="landscape">Your device orientation is "landscape"<h1>