右边的自举两列

我有以下问题，我为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

右边的自举两列

回答

相关问题