使用引導程序在我的html代碼中添加響應能力

Question

我很努力使用引導程序將響應性添加到我的網頁中的某個部分。

在上述圖像中，當窗口尺寸大於在引導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>

你需要這樣的事???