Twitter bootstrap 推拉产品页面

早上好，今天的目标是使用Bootstrap框架（V3.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 -->

标志
里塞卡
提托洛
IMG
普雷齐
阿吉翁吉
德塔利

我需要PREZZI；阿吉翁吉；DETTAGLI divs在TITOLO下方对齐：线不应缠绕

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

我可以使用Bootstrap纯网格逻辑来实现这一点吗？还是我必须使用一些CSS自定义媒体查询技巧来修复它

---

Thx

如果您可以控制“titolo”块的高度，请签出此小提琴：

标志
里塞卡
提托洛
IMG
普雷齐
阿吉翁吉
德塔利
.栏目{
最小高度：100px；
边框：1px实心#333；
字体大小：16px；
}
阿尔托先生{
最小高度：400px；
}
.内容{
位置：相对位置；
明确：两者皆有；
}
@介质（最小宽度：1200px）{
siderbar先生{
位置：绝对位置；
右：0；
顶部：100px；
}
}

make a fiddle这很好，我已经考虑过这种解决方案，但是。。。我指定我正在寻找一个“无技巧”的解决方案，使用裸行和裸列、推/拉等。。不过，谢谢你。。。

<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;
    }
}