css - 响应式设置中间列在顶部

Question

所以我有一个传统的三列布局。左边一栏是工具箱栏，中间一栏是“动态内容”栏，右边一栏是数据汇总栏。

我想要实现的是，一旦出现一些响应，中心列就会位于顶部。这将是网站最重要的部分，因此应该放在最前面。我似乎无法让它与 Bootstrap 一起工作。这是我的布局:

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <!-- column: left -->
        <div class="col-md-2" id="sidebarleft">left </div>
        <!-- column: center-->
        <div class="col-md-8" id="main">middle</div>
        <!-- column: right -->
        <div class="col-md-2" id="sidebarright">right</div>
    </div>
</div>

那么我将如何实现这一目标？

谢谢!

Answer 1

这应该可以解决问题。

因此当浏览器使用 Bootstrap 的“md”视口(viewport)时，布局是完整的，但是当浏览器变小时(所以“sm”和“xs") 中间的列在顶部，然后是左右。

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <!-- column: center-->
        <div class="col-md-8 col-md-push-2" id="main">middle</div>
        <!-- column: left -->
        <div class="col-md-2 col-md-pull-8" id="sidebarleft">left </div>
        <!-- column: right -->
    <div class="col-md-2" id="sidebarright">right</div>
</div>