将 flex div 添加到英雄并在调整大小时反转位置

Question

正如标题所说，我想要实现的目标（只有 2 个分辨率，最小/最大 767px）

大于 767px，并排 2 个 div。一种是左侧有文字，一种是右侧有图像。
- 文本位置固定（字体随调整大小而变化），图像随调整大小而移动
- 图像可以位于文本后面，因此 z 索引较低
较小或 767px，使用引导程序开箱即用功能并将它们放在彼此的顶部
- 但是倒置（图像在第一行，文本在第二行），没有重叠

我可以实现其中一个或另一个……但不能两者兼而有之。让文本 div 具有绝对位置，使图像具有

transform: translateX(50%)

的弹性是我最好的方法，但它似乎不正确。我将简化代码以便更好地阅读。

@media (max-width: 767px) {
  .flex-md-row-reverse {
    flex-direction: column-reverse !important;
  }
  .order-md-1 {
    order: 2;
  }
  .order-md-2 {
    order: 1;
  }
}

<html>
<head>
    <!--Load bootstrap before custom css-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-- hero -->
    <div class="container">
        <div class="row hero flex-md-row-reverse">
            <div class="hero-text col-md-6 order-md-1" >
                 MY TEXT
            </div>
            <div class="hero-img col-md-6 order-md-2">
                <img src="https://placehold.co/200x200">
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

请更改

flex-direction: column-reverse !important;

到

flex-direction: row-reverse !important

将 flex div 添加到英雄并在调整大小时反转位置

问题描述投票：0回答：1

1个回答

最新问题

将 flex div 添加到英雄并在调整大小时反转位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1