ウィンドウサイズに基づいてオブジェクトの順序を変更するにはどうすればよいですか？ （HTML/CSS）

Question

私はBootstrapフレームワークを利用してサイトを作成しています。私たちのチームの "About Us"セクションにはcolumnの画像とcolumnという名前の/ bioという画像があります。添付のCSSファイルで@media (max-width: 1199px) {でウィンドウの変更を処理しています。

セクションでは、現在、書式設定されている方法は次のとおりです。

<div class="container team"> 
    <h2>Meet the Team</h2> 
    <hr> 
    <div class="row row-eq-height" id="ethan"> 
     <div class="col-md-6" id="picture"> 
     <img src="[Image Link]" width="500" height="350" alt="Ethan Blagg"> 
     </div> 

     <div class="col-md-6" id="bio"> 
     <div class="row" id="name"> 
      <h3>Ethan Blagg</h3> 
      <hr> 
     </div> 

     <div class="row" id="info"> 
      <p> [bio goes here] </p> 
     </div> 
     </div> 
    </div> 
</div> 

この交互：

Picture | Name+Bio

Name+Bio | Picture

Picture | Name+Bio

Name+Bio | Picture

私はウィンドウ幅に992pxの下に取得するときに私の問題は、への書式設定の変更である：など

Picture

Name+Bio

Name+Bio

Picture

ウィンドウのサイズが変更されたときにオブジェクトの順序を変更するにはどうすればよいですか？

フルサイズの場合、コンテナ内で左右に交互に表示されますが、一定のサイズよりも小さくなると、フォーマットは予想どおり垂直になりますが、順序は正しくありません。これはHTMLやCSSで変更する必要がありますか？

Answer 1

あなたは再注文に@media (max-width: 1199px)ルール子どもたちが必要な場合は、ブートストラップ4のflexbox列を使用して、あなたは再オーダーしたい人の子供と親行にクラスを割り当てるには、再度順にフレックスorderプロパティを使用します。一貫してpicture + name+bioにするには、name+bioが最初に来る行にクラスを追加し、その行に#picture { order: -1; }を使用して最初に画像を配置します。

@media (max-width: 1199px) { 
 
    .reorder #picture { 
 
    order: -1; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container team"> 
 
    <h2>Meet the Team</h2> 
 
    <hr> 
 
    <div class="row row-eq-height" id="ethan"> 
 
    <div class="col-md-6" id="picture"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg" width="500" height="350" alt="Ethan Blagg"> 
 
    </div> 
 

 
    <div class="col-md-6" id="bio"> 
 
     <div class="row" id="name"> 
 
     <h3>Ethan Blagg</h3> 
 
     <hr> 
 
     </div> 
 

 
     <div class="row" id="info"> 
 
     <p> [bio goes here] </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <hr> 
 
    <div class="row row-eq-height reorder" id="ethan"> 
 

 
    <div class="col-md-6" id="bio"> 
 
     <div class="row" id="name"> 
 
     <h3>Ethan Blagg</h3> 
 
     <hr> 
 
     </div> 
 

 
     <div class="row" id="info"> 
 
     <p> [bio goes here] </p> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-md-6" id="picture"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg" width="500" height="350" alt="Ethan Blagg"> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 2

チェックアウトBootstrap column ordering。プッシュクラスとプルクラスを使用して、必要な結果を得る方法について説明します。