html文本从上到下,html – 根据类别将文本从右侧移动到下方

我试图根据图像的方向移动文本,但是我无法将文本内容放在我想要的位置.

我到底有多远：

$(document).ready(function() {

$(".change").click(function() {

if ( $(".content").hasClass("landscape")) {

$(".content").removeClass("landscape");

$(".content").addClass("portrait");

$("img").attr("src", "http://placehold.it/200x400")

} else {

$(".content").addClass("landscape");

$(".content").removeClass("portrait");

$("img").attr("src", "http://placehold.it/400x200")

}

});

});

.content.landscape .first {

display: inline-block;

}

.content.landscape .second {

display: inline-block;

vertical-align: top;

}

.content.landscape .third {

display: block;

}

.content.landscape .change {

display: block;

}

.content.portrait .first {

display: inline-block;

}

.content.portrait .second {

display: inline-block;

vertical-align: top;

}

.content.portrait .third {

display: inline-block;

}

.content.portrait .change {

display: block;

}

Change

Text Second

Text Third

我想要的是“第三文本”在纵向下面是“第二文本”,在横向时是在图像下面.

按按钮查看更改.如果可能的话,更喜欢没有javascript的解决方案.

澄清：我知道如何检测方向,但我无法将文本内容放在我想要的位置.