引导右侧的两列

debugcn 发表于 Dev

贡扎洛

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

演示

有什么想法可以实现吗？

爱迪生·比巴（Edison Biba）

在这里，您有一个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;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。