ブートストラップは右に2列ある

Question

私は次の問題を抱えています。私はXSとSMのためにもう1つの要素を示していますが、MDのために右の列に左の画像と2つの要素を表示したい、右の列の下に2番目の列を合わせる方法を見つけることはできません。ここが私のしたいことです。

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

これを実装する方法任意のアイデア？

Answer 1

ここには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; 
    } 
}