Css 列大小调整顺序

使用Bootstrap 3，我希望获得此调整大小功能：

在较小的屏幕上：

------------
| TitleBar |
------------
| NavBar   |
------------
|          |
| Content  |
|          |
------------

在大屏幕上：

----------------------
| NavBar | TitleBar  |
|        |------------
|        |           |
|        | Content   |
|        |           |
----------------------

从下面的例子中，我能得到的最接近的结果是：

----------------------
| NavBar | TitleBar  |
|        |------------
|        |           
|        |    
|        |           
----------------------
         |           |
         | Content   |
         |           |
         -------------



<div id="voterRegistrationContainer" class="container-fluid">
    <div class="row">
        <div id="TitleBar" class="col-lg-10 col-lg-push-2" style="background-color:turquoise">                    
            Voter Registration
        </div>

        <div id="NavBar" class="col-lg-2 col-lg-pull-10" style="background-color:lightblue;"">
            <ul style="font-weight: bold; font-size: x-large; list-style: none">
                <li>Home</li>
                <li>Voters</li>
                <li>Register</li>
                <li>Elections</li>
                <li>Reports</li>
                <li>Admin</li>
                <li>Log Out</li>
            </ul>
        </div>                   

        <div id="Content" class="col-lg-10 col-lg-push-2" style="background-color:lavender;">
            This is where the content goes
        </div>
    </div>
</div>

----------------------
|导航栏|标题栏|
|        |------------
|        |           
|        |    
|        |           
----------------------
|           |
|内容|
|           |
-------------
选民登记
这是正确的结构：

<div id="voterRegistrationContainer" class="container-fluid">

    <div id="NavBar" class="col-lg-6 col-md-12 col-xs-12" style="background-color:lightblue;"">
            <nav class="navbar navbar-default" role="navigation">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                  <li><a>Voters</a></li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </nav>
        </div>    


        <div id="TitleBar" class="col-lg-6 col-md-12 col-xs-12" style="background-color:turquoise">                    
            <div class="row">
            <div class="col-md-12">
                Title Bar
            </div>
            <div class="col-md-12"></div>
                Content
            </div>
        </div>    
</div>


我想是这样的

<div class="col-xs-12 visible-xs">TitleBar</div>
<div class="col-xs-12 col-sm-6">NavBar</div>
<div class="col-xs-12 col-sm-6">
    <div class="row>
        <div class="col-sm-12 hidden-xs">TitleBar</div>
        <div class="col-sm-12">Content</div>
    </div>
</div>

标题栏
导航条
使用Bootstrap实现这一点的一种方法是使用
pull right
类，因为“导航”比“标题”高，Bootstrap会自然地将“导航”向左浮动。因此，您可以使用
pull right
将“标题”和“内容”保留在右侧。同样，这是在假设你的“导航”比你的“头衔”高的情况下进行的

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-10 pull-right">
          Voter Registration
      </div>
      <div class="col-xs-12 col-md-2">
        <ul style="font-weight: bold; font-size: x-large; list-style: none">
            <li>Home</li>
            <li>Voters</li>
            <li>Register</li>
            <li>Elections</li>
            <li>Reports</li>
            <li>Admin</li>
            <li>Log Out</li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-10 pull-right">
          This is where the content goes
      </div>
   </div>  
</div>


选民登记

家
选民
登记册
选举
报告
管理员
注销

这就是内容所在

非常确定引导程序不能做到这一点……浮动不是这样工作的。可能会很有趣。是的，这是给我的一个要求，但我不确定有没有一个简单的方法可以在引导，除非我忽略了一些东西。可能有两个标题栏；一个出现在较小的屏幕上，但隐藏在较大的屏幕上，另一个只出现在较大的屏幕上。Flexbox可以做到这一点，但这是唯一的方法，即使这样也很混乱。谢谢！我想也没有一种引导方法。事实上，我已经设计出了flexbox解决方案，但我认为它需要一个已知的
。行
高度（至少在Chrome中是这样）。不客气。有趣的场景是，认为“移动优先”是行不通的。虽然使用
col-*-pull-*
，
col-*-push-*
类是首选解决方案。只能使用
pull right
或响应实用程序类作为最后手段。这不起作用，因为OP希望在移动设备上首先使用标题。这也起作用，我有一位同事建议，我能够以这种方式进行原型设计并使其工作，尽管使用pull right更优雅。