为什么Bootstrap页面中div的渲染顺序与代码编写顺序相反？

问题原因 #

这个现象是Bootstrap 3的pull-right类的实现逻辑和CSS浮动规则共同导致的：

• Bootstrap 3的pull-right本质是设置float: right，会让元素脱离常规文档流，优先靠父容器的右侧排布
• CSS中多个右浮动块级元素的排布规则为：按HTML书写顺序，后出现的右浮动元素会优先占据更靠上的右对齐位置，先出现的右浮动元素会被挤到后出现元素的下方，最终渲染顺序和HTML书写顺序刚好相反。

你的代码里先写了包含First 2的pull-right行，后写了包含First 1的pull-right行，所以视觉上First 1会显示在上方，First 2显示在下方，和你预期的顺序相反。

解决方案 #

如果你不想调整HTML元素的书写顺序，可以用下面两种方法实现预期效果：

• 给外层.list-group加text-right类，同时去掉两个row上的pull-right类，让块级元素内容右对齐，元素顺序就会和书写顺序完全一致

<div class="list-group text-right">          
   <div class="row">
        <div class="col-md-12">
            <strong>First 2</strong>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <strong>First 1</strong>
        </div>
    </div>
</div>

• 自定义Flex布局实现右对齐，不会打乱元素原有顺序：

.right-align-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

给外层.list-group加上上面的类即可，不需要修改子元素的原有样式。

内容的提问来源于stack exchange，提问作者its me