如何使用CSS调整Bootstrap中col-md-6区块至顶部位置

嘿，我懂你想把那个标着「Report」的col-md-6区块挪到最顶部的需求啦！因为你用的是Bootstrap栅格系统，其实最直接也最符合语义化的方式就是调整HTML元素的顺序——Bootstrap的布局是跟着DOM里元素的顺序走的，所以只要把Report的区块放到row容器里的最前面就行。

修改后的代码片段： #

<div class="row inview dragula clearfix">
  <!-- 把Report区块移到最顶部 -->
  <div class="col-md-6 clearfix">
    <div class="box " style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
      <div class="box-body draggable handle"> Report </div>
    </div>
  </div>

  <div class="col-md-12 clearfix">
    <div class="box clearfix" style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
      <div class="box-body draggable handle"> Set Up </div>
    </div>
  </div>

  <div class="col-md-3 clearfix">
    <div class="box " style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
      <div class="box-body draggable handle"> Shortcut </div>
    </div>
  </div>

  <div class="col-md-3 clearfix">
    <div class="box" style = "height:243px;border:4px dashed rgba(25,25,25,.5)">
      <div class="box-body draggable handle"> Shortcut 2 </div>
    </div>
  </div>

  <div class="col-md-9 ">
    <div class="box" style = "height:500px;border:4px dashed rgba(25,25,25,.5)">
      <div class="box-body draggable handle"> Calendar </div>
    </div>
  </div>
</div>

额外说明： #

• Bootstrap的栅格系统要求同一行的列总宽度在对应断点（这里是md，即≥768px）下总和为12，调整后的布局完全符合这个规则：顶部Report占6列，下方Set Up占12列（单独一行），再往下Shortcut(3)+Shortcut2(3)=6列，Calendar占9列（会自动换行，因为6+9>12），布局不会错乱。
• 如果因为特殊需求不想改动HTML结构，也可以用Bootstrap的flex排序类：给Report的col-md-6加上order-first类（Bootstrap 4及以上版本支持），或者自定义CSS：

  .col-md-6.clearfix {
    order: -1; /* 让这个元素在flex容器里排最前面 */
  }
  

  不过还是优先推荐调整DOM顺序，这样更符合语义化，对SEO和无障碍访问更友好~

内容的提问来源于stack exchange，提问作者Kris Jon Manait