可以使用Bootstrap实现这个Mobile / Desktop布局？ （或其他网格） [英] Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

问题描述

我使用Twitter Bootstrap 3创建了一个移动网站。在大屏幕上，我想要两个项目（我的草图中的＃1和＃2）在左侧的边栏中，而大内容区域（＃3）在右边。在小屏幕（移动）上，我希望它们按照＃1，＃3，＃2的顺序堆叠。

I'm using Twitter Bootstrap 3 to create a mobile-ready website. On a large screen, I'd like two items (#1 and #2 in my sketch) to be in a sidebar to the left, while the large content area (#3) is to the right. On a small screen (mobile), I'd like them to be stacked in order #1, #3, #2.

在第三个草图中执行以下结果：

Doing the following results in the third sketch:

<div class="row">
    <div class="col-lg-5">#1</div>
    <div class="col-lg-7">#3</div>
    <div class="col-lg-5">#2</div>
</div>

正如你所看到的，我的＃2 div被下推到一个新行。我尝试了Pushing / pull columns没有运气。

As you can see, my #2 div is pushed down to a new row. I've tried Pushing/pulling columns with no luck.

我可以通过复制＃2并有条件地隐藏/显示CSS来实现我想要的脏版本

I can achieve a "dirty" version of I want by duplicating #2 and conditionally hiding/showing it with CSS, but this seems like an ugly hack.

我的草图可以使用Bootstrap（或另一个CSS网格系统）实现吗？

Can my sketch be achieved using Bootstrap (or another CSS grid system)?

推荐答案

尝试浮动到右侧:(请参阅： http://bootply.com/78158 ）

Try to float to the right: (see: http://bootply.com/78158)

CSS ：

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}   

HTML ：

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>

这篇关于可以使用Bootstrap实现这个Mobile / Desktop布局？ （或其他网格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！