Html 根据类别将文本从右侧移动到下方

我试图根据图像的方向移动文本，但在将文本内容放置到所需位置时遇到问题

我已经走了多远：

$（文档）.ready（函数（）{
$（“.change”）。单击（函数（）{
if（$（“.content”）.hasClass（“景观”））{
$（“.content”）.removeClass（“景观”）；
$（“.content”）.addClass（“肖像”）；
$（“img”）.attr（“src”http://placehold.it/200x400")
}否则{
$（“.content”）.addClass（“景观”）；
$（“.content”）.removeClass（“肖像”）；
$（“img”）.attr（“src”http://placehold.it/400x200")
}
});
});
.content.landscape.首先{
显示：内联块；
}
.内容.风景.第二{
显示：内联块；
垂直对齐：顶部；
}
.内容.风景.第三{
显示：块；
}
.内容.风景.变化{
显示：块；
}
.内容.肖像.首先{
显示：内联块；
}
.内容.肖像.第二{
显示：内联块；
垂直对齐：顶部；
}
.内容.肖像.第三{
显示：内联块；
}
.内容.肖像.变化{
显示：块；
}

改变
文本秒
文本三
要使用纯CSS执行此操作，您需要使用
@media
查询。将纵向设置为默认布局，然后使用媒体查询更改为横向视图（如果屏幕足够宽）

例如（使用400px作为更改布局的宽度）：

有关媒体查询的更多信息，请查看
这不是首选解决方案，因为它使用javascript。但它给出了期望的结果



$（文档）.ready（函数（）{
$（“.change”）。单击（函数（）{
if（$（“.content”）.hasClass（“景观”））{
$（“.content”）.removeClass（“景观”）；
$（“.content”）.addClass（“肖像”）；
$（“img”）.attr（“src”http://placehold.it/200x400");
$（“.third”）.detach（）.appendTo（“.side”）；
}否则{
$（“.content”）.addClass（“景观”）；
$（“.content”）.removeClass（“肖像”）；
$（“img”）.attr（“src”http://placehold.it/400x200");
$（“.third”）.detach（）.appendTo（“.bottom”）；
}
});
});
.content.首先{
显示：内联块；
垂直对齐：顶部；
}
.内容方面{
显示：内联块；
}
.内容.变化{
显示：块；
}

改变
文本秒
文本三
在纵向时，这无助于将第三个文本放置在第二个文本下方。对不起，误读了问题。您是否试图让“第二个文本”始终停留在图像旁边，而只移动“第三个文本”？
.content {
    .first {
        display: inline-block;
    }
    .second {
       display: inline-block;
       vertical-align: top;
    }
    .third {
       display: inline-block;
    }
    .change {
       display: block;
    }
}

@media (min-width: 400px) {
    .third {
        display: block;
    }
}