推拉产品页面

Question

早上好，今天的目标是使用Bootstrap框架（v 3.0.3）创建响应式电子商务“详细信息”页面。

这是我们现在设法做的事情：

移动版本

桌面版

我的代码，省略了标准模板：

<div class="container">

        <div class="row">
            <div class="col-xs-6 col-lg-4 blocco rosso columns">LOGO</div>
            <div class="col-xs-6 col-lg-4 blocco verde columns">RICERCA</div>

            <div class="col-xs-12 col-lg-6 col-lg-push-6 blocco rosso columns">TITOLO</div>
            <div class="col-xs-12 col-lg-6 col-lg-pull-6 blocco alto blu columns">IMG</div>

            <div class="col-xs-12 col-lg-6 columns">
                <div class="row">
                    <div class="col-xs-12 col-lg-12 blocco rosa columns">PREZZI</div>
                    <div class="col-xs-12 col-lg-12 blocco arancio columns">AGGIUNGI</div>
                    <div class="col-xs-12 col-lg-12 blocco giallo columns">DETTAGLI</div>
                </div>
            </div>
        </div>

    </div> <!-- /container -->

我需要PREZZI;为Aggiungi; DETTAGLI divs在TITOLO下方对齐：不应该包裹该行。

我的意思是TITOLO + PREZZI + AGGIUNGI + DETTAGLI应该是桌面版的侧边栏，同时保持推/拉TITOLO / IMG行为。

我可以使用Bootstrap纯网格逻辑做到这一点，还是我不得不用一些CSS自定义媒体查询技巧修复它？

THX

Answer 1

如果你可以控制“titolo”区块的高度，请查看这个小提琴：
http://jsfiddle.net/554jL/

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-lg-4 columns">LOGO</div> 
        <div class="col-xs-6 col-lg-4 columns">RICERCA</div>

        <div class="content">
            <div class="col-xs-12 col-lg-6 col-lg-push-6 columns">TITOLO</div>
            <div class="col-xs-12 col-lg-6 col-lg-pull-6 alto columns">IMG</div>

            <div class="col-xs-12 col-lg-6 columns siderbar">
                <div class="row">
                    <div class="col-xs-12 col-lg-12 columns">PREZZI</div>
                    <div class="col-xs-12 col-lg-12 columns">AGGIUNGI</div>
                    <div class="col-xs-12 col-lg-12 columns">DETTAGLI</div>
                </div>
            </div>                
        </div>            
    </div>
</div>

.columns{
    min-height: 100px;
    border: 1px solid #333;
    font-size: 16px;
}

.alto{
    min-height: 400px;
}

.content{
    position: relative;
    clear: both;
}

@media (min-width: 1200px) {
    .siderbar{
        position: absolute;
        right: 0;
        top: 100px;
    }
}