レスポンシブデザインのブロック要素の順序を変更するにはどうすればよいですか？

Question

I持って、次のHTMLマークアップ、

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

.col-2-3 { 
    width: 66%; 
    } 

    .col-1-3 { 
    width: 33%; 
    } 

フィドルがここで見つけることができ

<section class="container about-container"> 
      <div class="about-author col col-2-3"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p> 
      </div> 
      <div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div> 
</section> 

と次のスタイルが定義されている、https://jsfiddle.net/yh76h0f9/ 今私は、このセクションは応答したいと思いますが、ときcol：display：blockに設定すると、画像は自然にテキストの下に流れます。画面サイズが570px以下の場合、テキストの上に画像を表示するにはどうすればよいですか？

Answer 1

変更sectionの方向と変化する子どもたちのために：

.container{ 
 
direction: rtl; 
 
} 
 

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

 
.col-2-3 { 
 
    width: 66%; 
 
    direction: ltr; 
 
    } 
 

 
    .col-1-3 { 
 
    width: 33%; 
 
    } 
 
    
 
    .col-1-3 img { 
 
    max-width: 100%; 
 
    }

<section class="container about-container"> 
 
<div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div> 
 
      <div class="about-author col col-2-3"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p> 
 
      </div>    
 
</section>

そして、私は画像の最大幅のスタイルを追加しました。

Answer 2

ここではフレックスボックスを使用します。 flex-direction:column-reverseは、あなたがやりたいことになります。

.container {display:flex} 
 

 
@media screen and (max-width:570px) { 
 
    /* small screens */ 
 
    .container {flex-direction: column-reverse} 
 
} 
 

 
@media screen and (min-width:570px) { 
 
    /* large screens */ 
 
    .container {flex-direction: row} 
 
    /* adjust sizes of child elements as needed, with % or flex-grow */ 
 
}

<section class="container about-container"> 
 
      <div class="about-author col col-2-3"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p> 
 
      </div> 
 
      <div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div> 
 
</section>

を（それのサイズを変更し、「小さな画面」バージョンを見ることができるようにするために、「全ページ」でスニペットを見る）

Answer 3

何Iこれを克服するために過去に行われたことは、同じイメージを2回含むことです。このような状況では、モバイル用のテキストは1つで、デスクトップ用のテキストは1つです。次に、メディアクエリを使用して、画面サイズに応じて表示/非表示を切り替えます。

.col { 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
} 
 

 
.col-2-3 { 
 
\t width: 66%; 
 
} 
 

 
.col-1-3 { 
 
\t width: 33%; 
 
} 
 
.mobile-image{ 
 
\t display:none; 
 
} 
 
@media all and (max-width:570px){ 
 
.mobile-image{ 
 
\t display:block; 
 
} 
 
.desktop-image{ 
 
    display:none; 
 
} 
 
}

<section class="container about-container"> 
 
    <div class="image-author mobile-image col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div> 
 
    <div class="about-author col col-2-3"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p> 
 
    </div> 
 
    <div class="image-author desktop-image col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div> 
 
</section>