根据班级将文本从右侧移动到下方

Question

我正在尝试根据图像的方向移动文本，但我无法将文本内容放在我想要的位置。

我走了多远：

https://jsfiddle.net/sj9jgvyq/16/

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content landscape">
   <button class="change">
    Change
  </button>
  <div class="first">
    <img src="http://placehold.it/400x200">
  </div>
  <div class="second">
    Text Second
  </div>
  <div class="third">
    Text Third
  </div>
</div>

我想要的是“第三文字”在纵向下面是“第二文字”，在横向时是在图像下面。

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

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

Answer 1

要使用纯CSS执行此操作，您需要使用@media个查询。将纵向作为默认布局，然后在屏幕足够宽的情况下使用媒体查询更改为横向视图。

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

.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;
    }
}

有关媒体查询的更多信息，请查看here

Answer 2

这不是首选解决方案，因为它使用javascript。但它给出了理想的结果。

https://jsfiddle.net/sj9jgvyq/18/

$(document).ready(function() {
  $(".change").click(function() {
    if ( $(".content").hasClass("landscape")) {
      $(".content").removeClass("landscape");
      $(".content").addClass("portrait");
      $("img").attr("src", "http://placehold.it/200x400");
      $(".third").detach().appendTo(".side");
    } else {
      $(".content").addClass("landscape");
      $(".content").removeClass("portrait");
      $("img").attr("src", "http://placehold.it/400x200");
      $(".third").detach().appendTo(".bottom");
    }
  });
});

.content .first {
  display: inline-block;
  vertical-align: top;
}

.content .side {
  display: inline-block;
}

.content .change {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content landscape">
   <button class="change">
    Change
  </button>
  <div class="first">
    <img src="http://placehold.it/400x200">
  </div>
  <div class="side">
    <div class="second">
      Text Second
    </div>
  </div>
  <div class="bottom">
    <div class="third">
      Text Third
    </div>
  </div>
</div>