把旁邊的一欄放在上面放在一邊

我只是涉足CSS和HTML。此刻，我在該列中有一個<article>應該有兩個項目，左側的圖片和右側的文章信息（標題和段落）。當屏幕放大時看起來沒問題，但如果屏幕縮小圖像並且文本縮小。我正在尋找圖片來保留圖片的大小，並將圖片放在圖片下方，而不是縮小圖片。把旁邊的一欄放在上面放在一邊

http://codepen.io/anon/pen/Yygdjv

<div class="container-fluid"> 
<div class="row"> 
    <aside class="col-sm-1">    
    </aside> 
    <section class="col-sm-7"> 
     <article> 
      <div class="row"> 
       <aside class="col-xs-6"> 
        <img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/> 
       </aside> 
       <aside class="col-xs-6"> 
        <div id="DIV___5"> 
         <span id="SPAN___6"> <a href="http://www.sooziq.com/category/miscellaneous/" id="A___7">Basketball</a></span> 
         <h2 id="H2___8"> 
          <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" rel="bookmark" id="A___9">What really Matters</a> 
         </h2> 
         <span id="SPAN___10">November 12, 2015</span> 
         <p id="P___11"> 
          Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! <a href="http://www.sooziq.com/22045/he-colored-his-phones-camera-the-reason-why-will-amaze-you/" id="A___12">Read More</a> 
         </p> 
        </div> 
       </aside> 
      </div> 
     </article> 
    </section> 
</div> 
</div>

來源

2015-11-19 Master

@media規則（可選），你可以讓你的代碼的snipet？你給它的鏈接真的很慢加載 –

這是一個Twitter的引導3問題。您可以將這兩個列的col-xs-6更改爲col-sm-6或col-md-6。在sm或md斷點之後（無論你選擇哪個），它將使兩列全寬，並且圖像自然會位於最前面。對於兩列，您可以更加明確地使用class="col-xs-12 col-sm-6"，但這並不是真的有必要。

您的演示的叉：http://codepen.io/anon/pen/GpezRL

來源

2015-11-19 15:44:41

你也可以用喜歡 -

@media (max-width:580px) 

    { 
    .col-xs-6 { 
     width: 50%; 
     clear: both; 
    } 
    }

來源

2015-11-19 15:50:56

把旁邊的一欄放在上面放在一邊

回答

相關問題