Question

我正在使用一个使用bootstrap 3的响应式模板。我希望根据以下内容更改移动视图中的div顺序。

我是CSS新手，所以我的努力很少。我不知道从哪里开始解决这个问题。

当调整大小到手机时，我需要在星期日晚餐div下面的菜单div，然后是1/2 PRICE，我们的酒吧，我们的美食，餐饮，最后联系。

有人可以帮我这个吗？

这是地址：

http://www.cambusanj.com/new_site/

Answer 1

我认为你正在寻找类似的东西。

使用.col-md-push- *和.col-md-pull- *修饰符类轻松更改内置网格列的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Answer 2

首先需要阅读Bootstrap文档。但基本上你想做的事情看起来像这样：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="well">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>Consectetur adipisicing elit. Pariatur omnis qui repellendus mollitia nulla, dicta cum ad et architecto atque autem asperiores porro fugit voluptas voluptates sunt aperiam similique minus.</p>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>Consectetur adipisicing elit. Pariatur omnis qui repellendus mollitia nulla, dicta cum ad et architecto atque autem asperiores porro fugit voluptas voluptates sunt aperiam similique minus.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="well">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>Consectetur adipisicing elit. Pariatur omnis qui repellendus mollitia nulla, dicta cum ad et architecto atque autem asperiores porro fugit voluptas voluptates sunt aperiam similique minus.</p>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h1>Lorem ipsum dolor sit amet</h1>
                <p>Consectetur adipisicing elit. Pariatur omnis qui repellendus mollitia nulla, dicta cum ad et architecto atque autem asperiores porro fugit voluptas voluptates sunt aperiam similique minus.</p>
                </div>
                <div class="col-md-6">
                    <h1>Lorem ipsum dolor sit amet</h1>
                <p>Consectetur adipisicing elit. Pariatur omnis qui repellendus mollitia nulla, dicta cum ad et architecto atque autem asperiores porro fugit voluptas voluptates sunt aperiam similique minus.</p>
                </div>
            </div>
        </div>
    </div>
</div>

如何使用bootstrap 3.0在移动视图中订购div

2 个答案: