ブートストラップを使用してHTMLコードに応答性を追加する

Question

ブートストラップを使用して私のWebページの特定のセクションに応答性を追加するのに苦労しています。上の写真で

、ウィンドウサイズは、ブートストラップでLG以外である（すなわち：MD、SMまたはxs）が、私は、下部にトップと絵の説明を表示したいです。私がこのコードのために持っているhtmlとcssコードは以下の通りです。誰かがここで私を助けることができる？

HTML：

<script> 
    var background_img_url = "{{ now_running.render_tactics_pic() }}"; 
</script> 

    <section class="action"> 
     <div class="container"> 
      <a href="{{ url_for('.post', id=now_running.id) }}"> 
       <div class="left-text"> 
        <h4>{{ now_running.header }}</h4> 
        <p class="running-post">{{ now_running.body }}</p> 
       </div> 
       <div id="mainPost" class="right-image">   
       </div> 
      </a>  
     </div> 
    </section> 

CSSコード：

.action { 
    overflow: visible; 
    padding: 0px; 
    width: 100; 
    height: 400px; 
    background: #f2f2f2; 
    position: relative; 
} 

.action .left-text { 
    padding: 70px 0; 
    padding-right: 60px; 
    width: 50%; 
} 
.action .left-text h4 { 
    text-transform: uppercase; 
    font-size: 24px; 
    font-weight: 600; 
    letter-spacing: 1px; 
} 
.action .left-text p { 
    padding-top: 20px; 
} 
.action .left-text em { 
    font-size: 16px; 
    color: #aaa; 
    font-weight: 300; 
    font-style: normal; 
} 
.action .right-image { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50%; 
    height: 100%; 
    background-size: cover; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 

JSコード：

$(function() { 
    console.log("Right here"); 
    $('.action .right-image').css('background-image', 'url(' + background_img_url + ')'); 
}); 

Answer 1

ちょうどあなたのHTMLにこれを追加し、それが応答になります。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="action"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-6"> 
 
     <h4>Header</h4> 
 
     <p class="running-post">In the above picture, when window size is anything other than lg in bootstrap (ie: md, sm or xs), I want to display description on top and picture on bottom. The html and css code I have for this code is given below. Can someone help me here?</p> 
 
    </div> 
 
    <div id="mainPost" class="right-image col-lg-6"> 
 
     <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2017/01/nintchdbpict000292801126.jpg?strip=all&w=960" /> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</section>

あなたはこのようなものが必要？