block要素を上下逆転させたい

block要素を上下逆転させる方法はありますか？？

具体的には、メディアクエリで幅991px以下の時のみ、画像のtextとimgを逆に配置したいです。幅992px以上の時は図のままの配置にしたいです。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>
 <title>わたしたちについて</title>
<link rel="stylesheet" href="style.css" type="text/css"> 

<style>

.body{
   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
}

.Ourvision{
  margin-top: 50px;
  padding: 0 10vw;
}
.Ourvision_title p {
  font-size: 40px;
  font-weight:  bold;
  text-align: left;
  padding: 0;
  /*margin-top: 30px;*/
}
.Ourvision_title p:first-child {
    margin-block-end: -40px;
}
.Ourvision_title p:last-child {
    margin-block-end: -10px;
}
.Ourvision_title span {
  font-size: 20px;
  text-align: center;
  color: #73683b;
  line-height: 0px;
  margin: 0px;
  padding: 0;
}

@media screen and (min-width: 992px){/*PC版*/
.Ourvision_set1{
  margin-top: 50px;
  padding: 0 10vw;
  display: flex;
  justify-content: center;
}
.Ourvision_img1 img{
  width: 300px;
  height: 200px;
  margin-right: 10px;
}
.Ourvision_textbox1{
  margin-left: 10px;
  padding-top: 40px;
}
.Ourvision_textbox1 p{
  font-size: 18px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
}
.Ourvision_set2{
  margin-top: 50px;
  padding: 0 10vw;
  display: flex;
  justify-content: center;
}
.Ourvision_img2 img{
  width: 300px;
  height: 210px;
  margin-left: 10px;
}
.Ourvision_textbox2{
  margin-left: 10px;
  padding-top: 40px;
}
.Ourvision_textbox2 p{
  font-size: 18px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
}



}

@media screen and (max-width: 991px){/*小さいとき*/
.Ourvision_set1{
  display: block;
}
.Ourvision_img1 img{
  width: 250px;
  height: 167px;
  display: block;
  margin: auto;
  margin: auto;
}
.Ourvision_textbox1 p{
  font-size: 16px;
  margin-left: 10px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
  
  display: flex;
  justify-content: center;
  align-items: center;

}
.Ourvision_set2{
  display: block;

　position: relative;
}
.Ourvision_img2 img{
  width: 250px;
  height: 175px;
  display: block;
  margin: auto;
  margin: auto;
}
.Ourvision_textbox2 p{
  font-size: 16px;
  margin-right: 10px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
}

</style>
</head>

<body>

<div class="Ourvision">
 <div class="Ourvision_set1">
   <div class="Ourvision_img1">
    <img src="image/600420.png">
　　</div>
   <div class="Ourvision_textbox1">
    <p>あああああああああ</p>
    <p>あああああああああああああああああ</p>
　　</div>
 </div>
 <div class="Ourvision_set2">
   <div class="Ourvision_textbox2">
    <p>いいいいいいいいいいい</p>
    <p>いいいいいいいいいいいいいいい</p>
　　 </div>
    <div class="Ourvision_img2">
    <img src="image/600400.png">
　　</div>
 </div>
</div>

</body>

以上よろしくお願いいたします。

niconic73027793

2022/01/30 11:18

flex-direction:column-reverse で出来ないですか？

行動規範の内容に同意します

回答2件

自己解決

返信大変遅くなってしまい申し訳ありません！！

Lhankor_Mhy様とniconic73027793様のおっしゃる通りに、flex-direction: column-reverse;を用いてみましたが、どうもうまくいきませんでした！そこで視点を変え、

メディアクエリで幅991px以下の時のみ、block要素の上下を変えようとしていたのですが、メディアクエリで幅992px以上の時に左右を変えれば実現できるのではと思い、flex-direction: row-reverse;を用いたところ解決しました。(なぜflex-direction: column-reverse;ではいけなかったかはわかりません。)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>
 <title>わたしたちについて</title>
<link rel="stylesheet" href="style.css" type="text/css">

<style>

.body{
   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
}

.Ourvision{
  margin-top: 50px;
  padding: 0 10vw;
}
.Ourvision_title p {
  font-size: 40px;
  font-weight:  bold;
  text-align: left;
  padding: 0;
}
.Ourvision_title p:first-child {
    margin-block-end: -40px;
}
.Ourvision_title p:last-child {
    margin-block-end: -10px;
}
.Ourvision_title span {
  font-size: 20px;
  text-align: center;
  color: #73683b;
  line-height: 0px;
  margin: 0px;
  padding: 0;
}

@media screen and (min-width: 992px){/*PC版*/
.Ourvision_set1{
  margin-top: 50px;
  padding: 0 10vw;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;/*変更点*/
}
.Ourvision_img1 img{
  width: 300px;
  height: 200px;
  margin-right: 10px;
}
.Ourvision_textbox1{
  margin-left: 10px;
  padding-top: 40px;
}
.Ourvision_textbox1 p{
  font-size: 18px; 
  line-height: 18px;
  font-weight:  bold;
  color: red;
}
.Ourvision_set2{
  margin-top: 50px;
  padding: 0 10vw;
  display: flex;
  justify-content: center;
}
.Ourvision_img2 img{
  width: 300px;
  height: 210px;
  margin-left: 10px;
}
.Ourvision_textbox2{
  margin-left: 10px;
  padding-top: 40px;
}
.Ourvision_textbox2 p{
  font-size: 18px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
}



}

@media screen and (max-width: 991px){/*小さいとき*/
.Ourvision_set1{
  display: block;
}
.Ourvision_img1 img{
  width: 250px;
  height: 167px;
  display: block;
  margin: auto;
  margin: auto;
}
.Ourvision_textbox1 p{
  font-size: 16px;
  margin-left: 10px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
  
  display: flex;/*中央寄せする*/
  justify-content: center;
  align-items: center;

}
.Ourvision_set2{
  display: block;

　position: relative;
}
.Ourvision_img2 img{
  width: 250px;
  height: 175px;
  display: block;
  margin: auto;
  margin: auto;
}
.Ourvision_textbox2 p{
  font-size: 16px;
  margin-right: 10px;
  line-height: 18px;
  font-weight:  bold;
  color: red;
  
  display: flex;/*中央寄せする*/
  justify-content: center;
  align-items: center;
}
}

</style>
</head>

<body>

<div class="Ourvision">
 <div class="Ourvision_set1">
   <div class="Ourvision_img1">
    <img src="image/600420.png">
　　</div>
   <div class="Ourvision_textbox1">
    <p>あああああああああ</p>
    <p>あああああああああああああああああ</p>
　　</div>
 </div>
 <div class="Ourvision_set2">
    <div class="Ourvision_img2">
    <img src="image/600400.png">
　　</div>
   <div class="Ourvision_textbox2">
    <p>いいいいいいいいいいい</p>
    <p>いいいいいいいいいいいいいいい</p>
　　 </div>
 </div>
</div>

</body>

投稿2022/02/13 06:51

nitori-kun

総合スコア62

column-reverseにするか、またはorderで並べ替えるか、あたりでしょうか。
いずれにせよ、フレックスボックスにする必要があります。

css
1      .Ourvision_set2 {
2        display: flex;
3        flex-direction: column-reverse;
4      }

投稿2022/01/31 01:15

Lhankor_Mhy

総合スコア37437

Lhankor_Mhy

2022/01/31 01:18

回答した後に補足依頼欄の niconic73027793 さんのコメントに気づいた。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

block要素を上下逆転させたい

関連した質問