如何交换两个设置inline-block并排显示的div左右位置

你当前通过inline-block实现的并排布局，元素默认按照HTML中的书写顺序从左到右排列，要互换左右位置可以选以下几种方案：

• 方案1：直接调换HTML中两个块的书写顺序（零额外CSS，兼容性最好）
  这是最直接的实现方式：把当前写在前面的表单容器.container整体剪切，挪到联系信息块.contactInfo的后面，浏览器渲染时就会先渲染.contactInfo（显示在左侧），再渲染.container（显示在右侧）。
  调整后的核心HTML结构：

  <main class="contact contactInformation">
      <!-- 优先书写需要显示在左侧的联系信息块 -->
      <div class="contactInfo">
          <i class="fa-brands fa-facebook-f"></i>
          <i class="fa-brands fa-instagram"></i>
          <i class="fa-brands fa-twitter"></i>
          <i class="fa-brands fa-whatsapp"></i>
          <h4>INFO@EMAIL.COM</h4>
          <p>123 - 456 - 7890</p>
          <p>123 Queen Street West, Unit 10</p>
          <p>Toronto, Ontario</p>
          <p>M5V2D5</p>
      </div>
      <!-- 后书写需要显示在右侧的表单块 -->
      <div class="container">
          <div class="right-side">
              <form action="" method="post">
                  <div class="top">
                      <input type="text" placeholder="Name">
                      <input type="text" placeholder="Email">
                  </div>
                  <textarea name="name" placeholder="Message"></textarea>
                  <button type="submit" class="button">Submit</button>
              </form>
          </div>
      </div>
  </main>
  

• 方案2：不修改HTML结构，通过文本流向属性反转排列顺序
  给父容器设置从右到左的排版方向，两个inline-block子元素会自动反转排布顺序，注意要给子元素重置回从左到右的文本方向，避免内部文字排版错乱。
  追加CSS代码：

  .contactInformation {
      direction: rtl;
  }
  .contactInformation .container,
  .contactInformation .contactInfo {
      direction: ltr;
      /* 修复inline-block默认基线对齐导致的顶部错位问题 */
      vertical-align: top;
  }
  

• 方案3：替换为Flex布局（长期维护最方便）
  inline-block本身是为行内块级文本流设计的，用来做横向布局经常会出现间隙、对齐异常的问题，直接给父元素设置Flex布局，可以通过order属性自由控制子元素顺序，不需要改动HTML结构。
  调整后的核心CSS：

  .contactInformation {
      background-color: $Ice;
      height: 100vh;
      /* 启用Flex布局 */
      display: flex;
      align-items: flex-start;
      /* 按需设置两个块之间的间距 */
      gap: 2rem;
  }
  .contactInfo {
      /* 排到左侧 */
      order: 1;
      border: 2px solid red;
      width: 25%;
      /* 删除原有display: inline-block属性 */
  }
  .container {
      /* 排到右侧 */
      order: 2;
      padding-top: 50px;
      border: 2px solid red;
      /* 删除原有display: inline-block属性 */
  }
  /* 原有right-side及内部样式可以保留不需要修改 */
  

内容的提问来源于stack exchange，提问作者Kwabena Osei