Moving text from right to bottom, depending on class

Question

I am trying to change my text depending on the orientation of the image, but it is difficult for me to place the text content where I want it.

How far have I come:

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>

Run code

I want the “Third Text” to be under the “Second Text” when in the portrait and lower image in the landscape.

Click the button to see the change. Prefer a solution without javascript if possible.

Clarification: I know how to determine the orientation, but I can’t place the text content where I want.

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

-

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>