Question

我正在使用Twitter Bootstrap创建一个新网站。我对这方面的反应方面存在问题。

您现在可以查看我当前的网站：http://www.monroeorm.com/SNOA/

当您调整页面大小时，侧边栏和主要内容框不符合我需要的顺序。当我调整页面大小时，例如在移动设备上，侧边栏1显示在主要内容之前。我试图在网站调整大小或在移动设备上查看内容后显示内容。

这是我到目前为止所得到的：

HTML：

    <div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-info">
              <div class="panel-heading">
                <h3 class="panel-title">Sidebar1</h3>
              </div>
              <div class="panel-body">
                Sidebar1
              </div>
            </div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Primary Content</h3>
              </div>
              <div class="panel-body">
                Primary Content
              </div>
            </div>
            </div>

<div class="col-md-3">
<div class="panel panel-info">
              <div class="panel-heading">
                <h3 class="panel-title">Sidebar2</h3>
              </div>
              <div class="panel-body">
                Sidebar2
              </div>
            </div>
</div>
</div>
</div>

CSS： http://www.monroeorm.com/SNOA/css/bootstrap.css

我可能会比看起来更难 - 这有什么办法可以实现这个目标吗？

Answer 1

缺少＆＃34; col-sm-12 col-xs-12＆＃34;声明＆gt;＆gt; http://leoncio.me/dev/stack/20338694.html

<div class="container">
<div class="row">

  <div class="col-md-3 col-sm-12 col-xs-12">
     <div class="panel panel-info">
        <div class="panel-heading">
           <h3 class="panel-title">Sidebar1</h3>
        </div>
        <div class="panel-body">
           Sidebar1
        </div>
     </div>
  </div>

  <div class="col-md-6 col-sm-12 col-xs-12">
     <div class="panel panel-primary">
        <div class="panel-heading">
           <h3 class="panel-title">Primary Content</h3>
        </div>
        <div class="panel-body">
           Primary Content
        </div>
     </div>
  </div>

  <div class="col-md-3 col-sm-12 col-xs-12">
     <div class="panel panel-info">
        <div class="panel-heading">
           <h3 class="panel-title">Sidebar2</h3>
        </div>
        <div class="panel-body">
           Sidebar2
        </div>
     </div>
  </div>

</div>
</div>

Answer 2

您可以使用flexbox，然后在浏览器宽度为特定大小时添加媒体查询以重新排序div。

屏幕调整大小时需要帮助更改框的顺序

2 个答案: