如何更改bootstrap colum顺序响应完整网格？

Question

我知道如何使用col-push和col-pull更改自举列列顺序，但我无法通过完整网格（col-xs-12，col-sm-12）实现此功能。所以我想做的是你可以在下面的图片中看到

和我的代码

＆＃13;

＆＃13;

#sidebar{
  background:lightblue;
}
#content{
  background:lightgreen;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<main id="site-content" class="container">
  <div class="row">
    <aside id="sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <h1>Sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos a sed, quidem corporis nam ut recusandae aliquid, fugiat, earum eveniet porro aliquam quod.</p>
    </aside>
    <div id="content" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
      <h2>Hi I'm a title of this container</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolore, quos corrupti soluta vel necessitatibus quibusdam, dolor, quae sed quod cum.</p>
    </div>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

我正在谈论完整的网格col-xs-12，例如......我猜这是不同的问题

Answer 1

切换html文件中的顺序，使用float右键进行Web视图

＆＃13;

＆＃13;

#sidebar{
  background:lightblue;
  float:right;
}
#content{
  background:lightgreen;
  float:right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<main id="site-content" class="container">
  <div class="row">
    
    <div id="content" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
      <h2>Hi I'm a title of this container</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolore, quos corrupti soluta vel necessitatibus quibusdam, dolor, quae sed quod cum.</p>
    </div>
    <aside id="sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <h1>Sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos a sed, quidem corporis nam ut recusandae aliquid, fugiat, earum eveniet porro aliquam quod.</p>
    </aside>
  </div>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;