右邊的自舉兩列

我有以下問題，我爲XS和SM顯示了一個元素，但是對於MD我想在左邊顯示一個圖像，右邊顯示兩個元素，我不能找不到適合第二欄的方法。這是我想要做的右邊的自舉兩列

Mobile (this is working) 
---------------------- 
*Title* 
*Description* 
*Image* 
*Icons* 
---------------------- 

Now for >= MD (Not Working) 
---------------------- 
*Image* | *Title* 
     | *Description* 
     | *Icons* 
----------------------

我找不到適合描述和標題下的圖標的方法。這裏是我的代碼：

<div class="row"> 
     <div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-6 col-md-push-6"> 
       <h2>Title</h2> 
       <p>Data</p> 
     </div> 
      <div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-pull-6 col-md-6 col-lg-offset-1 main-tour"> 
        <img class="img-responsive center-block" src="https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg"/> 
      </div> 
     <div class="main-tour"> 
      <div class="col-xs-12 col-md-5 col-lg-offset-1 items m-t-3"> 
         <div>1</div> 
         <div>2</div> 
         <div>3</div> 
         <div>4</div> 
      </div> 
     </div> 
    </div>

DEMO

任何想法如何實現這一點的？

來源

2016-08-20 Gonzalo

如果它固定您的問題請標明是正確的，投票向上或告訴我更多，如果有任何問題;） –

這裏您有一個jsfiddle。使用媒體查詢獲取屏幕尺寸並應用您的CSS。

@media (min-width:420px) and (max-width:1040px){ 
    .main-tour{ 
    float:left; 
    } 

    .row .first, .row .main-tour{ 
    display:inline-block; 
    } 
    .main-tour.description{ 
    display:block; 
    float:none; 
    } 
}

來源

2016-08-20 09:18:30

謝謝您的解決方案的偉大工程！有一個問題，你能解釋一下內聯塊在這個特定情況下是如何工作的嗎？因爲我申請了我的現場版本，而'主要巡迴賽'的分區並不屬於標題;我知道在這個版本的作品，但在我的它不，我找不到解決方案。謝謝 – Gonzalo

當你使用display：inline-block;這些元素將以內聯方式顯示。在我的解決方案中，必須做的重要事情就是.description {float：none;}這就是使洞工作起作用的原因:)大拇指：D –

Edisoni你的回答非常明確。我正在用牆碰撞我的頭。在我整個網站的CSS和你評論的這個特定部分之間存在某種衝突，如果你有幾分鐘的時間你會看看https://jsfiddle.net/paqycmh9/8/。無論哪種方式，非常感謝你 – Gonzalo

右邊的自舉兩列

回答

相關問題